<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>이펙트 함수 종류</title>
<meta name="class-lists" content="jindo.Effect"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="여러가지 이펙트 함수들을 직접 테스트 해 볼 수 있는 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<link rel="stylesheet" type="text/css" href="doc.css">
<link rel="stylesheet" type="text/css" href="reference.css">
<style type="text/css">

</style>

<style type='text/css'>

	.graph { float:left; position:relative; width:150px; height:150px; margin:15px 0; border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
	.graph .name { position:relative; top:10px; left:10px; vertical-align:baseline;}
	.dot { position:absolute; width:1px; height:1px; background-color:#0075C8; overflow:hidden;}
	.realtime-hline { position:absolute; height:0; width:150px; border-top:1px solid red; bottom:0; display:none; overflow:hidden;}
	.transition { position:relative; width:300px; height:150px; margin:15px 0;}
	.position { position:absolute; width:80px; height:80px; border:1px solid #ccc; text-align:center;}
	.color { position:absolute; bottom:39px; width:300px; height:20px; border:1px solid #ccc; text-align:center;}
	.opacity { position:absolute; bottom:10px; width:300px; height:20px; border:1px solid #ccc; text-align:center;}
	.demoinput {margin-left:15px;}
	
	.cubicbezier-graph { position:absolute; width:300px; height:300px; margin:3px; border:1px solid #ccc;}
	.control-dot { position:absolute; width:7px; height:7px; left:0; bottom:0; cursor:move; overflow:hidden;}
	.d1 { background-color:#ff7575; }
	.d2 { background-color:#00C875; }
	
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
    <div class="body">
     
	<h3>이펙트 함수 종류</h3>
	<table class="effect" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<th>Name (jindo.Effect.)</th>
			<th>Graph</th>
			<th>Transition Demo</th>
		</tr>
		<tr>
			<td class="name">linear</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:2px; "></div><div class="dot" style="left:4px; bottom:4px; "></div><div class="dot" style="left:6px; bottom:6px; "></div><div class="dot" style="left:8px; bottom:8px; "></div><div class="dot" style="left:10px; bottom:10px; "></div><div class="dot" style="left:12px; bottom:12px; "></div><div class="dot" style="left:14px; bottom:14px; "></div><div class="dot" style="left:16px; bottom:16px; "></div><div class="dot" style="left:18px; bottom:18px; "></div><div class="dot" style="left:20px; bottom:20px; "></div><div class="dot" style="left:22px; bottom:22px; "></div><div class="dot" style="left:24px; bottom:24px; "></div><div class="dot" style="left:26px; bottom:26px; "></div><div class="dot" style="left:28px; bottom:28px; "></div><div class="dot" style="left:30px; bottom:30px; "></div><div class="dot" style="left:32px; bottom:32px; "></div><div class="dot" style="left:34px; bottom:34px; "></div><div class="dot" style="left:36px; bottom:36px; "></div><div class="dot" style="left:38px; bottom:38px; "></div><div class="dot" style="left:40px; bottom:40px; "></div><div class="dot" style="left:42px; bottom:42px; "></div><div class="dot" style="left:44px; bottom:44px; "></div><div class="dot" style="left:46px; bottom:46px; "></div><div class="dot" style="left:48px; bottom:48px; "></div><div class="dot" style="left:50px; bottom:50px; "></div><div class="dot" style="left:52px; bottom:52px; "></div><div class="dot" style="left:54px; bottom:54px; "></div><div class="dot" style="left:56px; bottom:56px; "></div><div class="dot" style="left:58px; bottom:58px; "></div><div class="dot" style="left:60px; bottom:60px; "></div><div class="dot" style="left:62px; bottom:62px; "></div><div class="dot" style="left:64px; bottom:64px; "></div><div class="dot" style="left:66px; bottom:66px; "></div><div class="dot" style="left:68px; bottom:68px; "></div><div class="dot" style="left:70px; bottom:70px; "></div><div class="dot" style="left:72px; bottom:72px; "></div><div class="dot" style="left:74px; bottom:74px; "></div><div class="dot" style="left:76px; bottom:76px; "></div><div class="dot" style="left:78px; bottom:78px; "></div><div class="dot" style="left:80px; bottom:80px; "></div><div class="dot" style="left:82px; bottom:82px; "></div><div class="dot" style="left:84px; bottom:84px; "></div><div class="dot" style="left:86px; bottom:86px; "></div><div class="dot" style="left:88px; bottom:88px; "></div><div class="dot" style="left:90px; bottom:90px; "></div><div class="dot" style="left:92px; bottom:92px; "></div><div class="dot" style="left:94px; bottom:94px; "></div><div class="dot" style="left:96px; bottom:96px; "></div><div class="dot" style="left:98px; bottom:98px; "></div><div class="dot" style="left:100px; bottom:100px; "></div><div class="dot" style="left:102px; bottom:102px; "></div><div class="dot" style="left:104px; bottom:104px; "></div><div class="dot" style="left:106px; bottom:106px; "></div><div class="dot" style="left:108px; bottom:108px; "></div><div class="dot" style="left:110px; bottom:110px; "></div><div class="dot" style="left:112px; bottom:112px; "></div><div class="dot" style="left:114px; bottom:114px; "></div><div class="dot" style="left:116px; bottom:116px; "></div><div class="dot" style="left:118px; bottom:118px; "></div><div class="dot" style="left:120px; bottom:120px; "></div><div class="dot" style="left:122px; bottom:122px; "></div><div class="dot" style="left:124px; bottom:124px; "></div><div class="dot" style="left:126px; bottom:126px; "></div><div class="dot" style="left:128px; bottom:128px; "></div><div class="dot" style="left:130px; bottom:130px; "></div><div class="dot" style="left:132px; bottom:132px; "></div><div class="dot" style="left:134px; bottom:134px; "></div><div class="dot" style="left:136px; bottom:136px; "></div><div class="dot" style="left:138px; bottom:138px; "></div><div class="dot" style="left:140px; bottom:140px; "></div><div class="dot" style="left:142px; bottom:142px; "></div><div class="dot" style="left:144px; bottom:144px; "></div><div class="dot" style="left:146px; bottom:146px; "></div><div class="dot" style="left:148px; bottom:148px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">overphase</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:30px; "></div><div class="dot" style="left:4px; bottom:43px; "></div><div class="dot" style="left:6px; bottom:53px; "></div><div class="dot" style="left:8px; bottom:61px; "></div><div class="dot" style="left:10px; bottom:68px; "></div><div class="dot" style="left:12px; bottom:74px; "></div><div class="dot" style="left:14px; bottom:79px; "></div><div class="dot" style="left:16px; bottom:85px; "></div><div class="dot" style="left:18px; bottom:89px; "></div><div class="dot" style="left:20px; bottom:94px; "></div><div class="dot" style="left:22px; bottom:98px; "></div><div class="dot" style="left:24px; bottom:102px; "></div><div class="dot" style="left:26px; bottom:106px; "></div><div class="dot" style="left:28px; bottom:109px; "></div><div class="dot" style="left:30px; bottom:113px; "></div><div class="dot" style="left:32px; bottom:116px; "></div><div class="dot" style="left:34px; bottom:119px; "></div><div class="dot" style="left:36px; bottom:122px; "></div><div class="dot" style="left:38px; bottom:124px; "></div><div class="dot" style="left:40px; bottom:127px; "></div><div class="dot" style="left:42px; bottom:130px; "></div><div class="dot" style="left:44px; bottom:132px; "></div><div class="dot" style="left:46px; bottom:134px; "></div><div class="dot" style="left:48px; bottom:136px; "></div><div class="dot" style="left:50px; bottom:138px; "></div><div class="dot" style="left:52px; bottom:140px; "></div><div class="dot" style="left:54px; bottom:142px; "></div><div class="dot" style="left:56px; bottom:144px; "></div><div class="dot" style="left:58px; bottom:146px; "></div><div class="dot" style="left:60px; bottom:147px; "></div><div class="dot" style="left:62px; bottom:149px; "></div><div class="dot" style="left:64px; bottom:151px; "></div><div class="dot" style="left:66px; bottom:152px; "></div><div class="dot" style="left:68px; bottom:153px; "></div><div class="dot" style="left:70px; bottom:154px; "></div><div class="dot" style="left:72px; bottom:156px; "></div><div class="dot" style="left:74px; bottom:157px; "></div><div class="dot" style="left:76px; bottom:158px; "></div><div class="dot" style="left:78px; bottom:159px; "></div><div class="dot" style="left:80px; bottom:160px; "></div><div class="dot" style="left:82px; bottom:161px; "></div><div class="dot" style="left:84px; bottom:161px; "></div><div class="dot" style="left:86px; bottom:162px; "></div><div class="dot" style="left:88px; bottom:163px; "></div><div class="dot" style="left:90px; bottom:163px; "></div><div class="dot" style="left:92px; bottom:164px; "></div><div class="dot" style="left:94px; bottom:164px; "></div><div class="dot" style="left:96px; bottom:165px; "></div><div class="dot" style="left:98px; bottom:165px; "></div><div class="dot" style="left:100px; bottom:165px; "></div><div class="dot" style="left:102px; bottom:165px; "></div><div class="dot" style="left:104px; bottom:166px; "></div><div class="dot" style="left:106px; bottom:166px; "></div><div class="dot" style="left:108px; bottom:166px; "></div><div class="dot" style="left:110px; bottom:166px; "></div><div class="dot" style="left:112px; bottom:166px; "></div><div class="dot" style="left:114px; bottom:165px; "></div><div class="dot" style="left:116px; bottom:165px; "></div><div class="dot" style="left:118px; bottom:165px; "></div><div class="dot" style="left:120px; bottom:165px; "></div><div class="dot" style="left:122px; bottom:164px; "></div><div class="dot" style="left:124px; bottom:164px; "></div><div class="dot" style="left:126px; bottom:163px; "></div><div class="dot" style="left:128px; bottom:162px; "></div><div class="dot" style="left:130px; bottom:162px; "></div><div class="dot" style="left:132px; bottom:161px; "></div><div class="dot" style="left:134px; bottom:160px; "></div><div class="dot" style="left:136px; bottom:159px; "></div><div class="dot" style="left:138px; bottom:158px; "></div><div class="dot" style="left:140px; bottom:157px; "></div><div class="dot" style="left:142px; bottom:156px; "></div><div class="dot" style="left:144px; bottom:154px; "></div><div class="dot" style="left:146px; bottom:153px; "></div><div class="dot" style="left:148px; bottom:152px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">sinusoidal</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:1px; "></div><div class="dot" style="left:8px; bottom:1px; "></div><div class="dot" style="left:10px; bottom:2px; "></div><div class="dot" style="left:12px; bottom:2px; "></div><div class="dot" style="left:14px; bottom:3px; "></div><div class="dot" style="left:16px; bottom:4px; "></div><div class="dot" style="left:18px; bottom:5px; "></div><div class="dot" style="left:20px; bottom:6px; "></div><div class="dot" style="left:22px; bottom:8px; "></div><div class="dot" style="left:24px; bottom:9px; "></div><div class="dot" style="left:26px; bottom:11px; "></div><div class="dot" style="left:28px; bottom:13px; "></div><div class="dot" style="left:30px; bottom:14px; "></div><div class="dot" style="left:32px; bottom:16px; "></div><div class="dot" style="left:34px; bottom:18px; "></div><div class="dot" style="left:36px; bottom:20px; "></div><div class="dot" style="left:38px; bottom:23px; "></div><div class="dot" style="left:40px; bottom:25px; "></div><div class="dot" style="left:42px; bottom:27px; "></div><div class="dot" style="left:44px; bottom:30px; "></div><div class="dot" style="left:46px; bottom:32px; "></div><div class="dot" style="left:48px; bottom:35px; "></div><div class="dot" style="left:50px; bottom:37px; "></div><div class="dot" style="left:52px; bottom:40px; "></div><div class="dot" style="left:54px; bottom:43px; "></div><div class="dot" style="left:56px; bottom:46px; "></div><div class="dot" style="left:58px; bottom:49px; "></div><div class="dot" style="left:60px; bottom:52px; "></div><div class="dot" style="left:62px; bottom:55px; "></div><div class="dot" style="left:64px; bottom:58px; "></div><div class="dot" style="left:66px; bottom:61px; "></div><div class="dot" style="left:68px; bottom:64px; "></div><div class="dot" style="left:70px; bottom:67px; "></div><div class="dot" style="left:72px; bottom:70px; "></div><div class="dot" style="left:74px; bottom:73px; "></div><div class="dot" style="left:76px; bottom:77px; "></div><div class="dot" style="left:78px; bottom:80px; "></div><div class="dot" style="left:80px; bottom:83px; "></div><div class="dot" style="left:82px; bottom:86px; "></div><div class="dot" style="left:84px; bottom:89px; "></div><div class="dot" style="left:86px; bottom:92px; "></div><div class="dot" style="left:88px; bottom:95px; "></div><div class="dot" style="left:90px; bottom:98px; "></div><div class="dot" style="left:92px; bottom:101px; "></div><div class="dot" style="left:94px; bottom:104px; "></div><div class="dot" style="left:96px; bottom:107px; "></div><div class="dot" style="left:98px; bottom:110px; "></div><div class="dot" style="left:100px; bottom:112px; "></div><div class="dot" style="left:102px; bottom:115px; "></div><div class="dot" style="left:104px; bottom:118px; "></div><div class="dot" style="left:106px; bottom:120px; "></div><div class="dot" style="left:108px; bottom:123px; "></div><div class="dot" style="left:110px; bottom:125px; "></div><div class="dot" style="left:112px; bottom:127px; "></div><div class="dot" style="left:114px; bottom:130px; "></div><div class="dot" style="left:116px; bottom:132px; "></div><div class="dot" style="left:118px; bottom:134px; "></div><div class="dot" style="left:120px; bottom:136px; "></div><div class="dot" style="left:122px; bottom:137px; "></div><div class="dot" style="left:124px; bottom:139px; "></div><div class="dot" style="left:126px; bottom:141px; "></div><div class="dot" style="left:128px; bottom:142px; "></div><div class="dot" style="left:130px; bottom:144px; "></div><div class="dot" style="left:132px; bottom:145px; "></div><div class="dot" style="left:134px; bottom:146px; "></div><div class="dot" style="left:136px; bottom:147px; "></div><div class="dot" style="left:138px; bottom:148px; "></div><div class="dot" style="left:140px; bottom:148px; "></div><div class="dot" style="left:142px; bottom:149px; "></div><div class="dot" style="left:144px; bottom:149px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">mirror</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:1px; "></div><div class="dot" style="left:6px; bottom:2px; "></div><div class="dot" style="left:8px; bottom:4px; "></div><div class="dot" style="left:10px; bottom:6px; "></div><div class="dot" style="left:12px; bottom:9px; "></div><div class="dot" style="left:14px; bottom:13px; "></div><div class="dot" style="left:16px; bottom:16px; "></div><div class="dot" style="left:18px; bottom:20px; "></div><div class="dot" style="left:20px; bottom:25px; "></div><div class="dot" style="left:22px; bottom:30px; "></div><div class="dot" style="left:24px; bottom:35px; "></div><div class="dot" style="left:26px; bottom:40px; "></div><div class="dot" style="left:28px; bottom:46px; "></div><div class="dot" style="left:30px; bottom:52px; "></div><div class="dot" style="left:32px; bottom:58px; "></div><div class="dot" style="left:34px; bottom:64px; "></div><div class="dot" style="left:36px; bottom:70px; "></div><div class="dot" style="left:38px; bottom:77px; "></div><div class="dot" style="left:40px; bottom:83px; "></div><div class="dot" style="left:42px; bottom:89px; "></div><div class="dot" style="left:44px; bottom:95px; "></div><div class="dot" style="left:46px; bottom:101px; "></div><div class="dot" style="left:48px; bottom:107px; "></div><div class="dot" style="left:50px; bottom:112px; "></div><div class="dot" style="left:52px; bottom:118px; "></div><div class="dot" style="left:54px; bottom:123px; "></div><div class="dot" style="left:56px; bottom:127px; "></div><div class="dot" style="left:58px; bottom:132px; "></div><div class="dot" style="left:60px; bottom:136px; "></div><div class="dot" style="left:62px; bottom:139px; "></div><div class="dot" style="left:64px; bottom:142px; "></div><div class="dot" style="left:66px; bottom:145px; "></div><div class="dot" style="left:68px; bottom:147px; "></div><div class="dot" style="left:70px; bottom:148px; "></div><div class="dot" style="left:72px; bottom:149px; "></div><div class="dot" style="left:74px; bottom:150px; "></div><div class="dot" style="left:76px; bottom:150px; "></div><div class="dot" style="left:78px; bottom:149px; "></div><div class="dot" style="left:80px; bottom:148px; "></div><div class="dot" style="left:82px; bottom:147px; "></div><div class="dot" style="left:84px; bottom:145px; "></div><div class="dot" style="left:86px; bottom:142px; "></div><div class="dot" style="left:88px; bottom:139px; "></div><div class="dot" style="left:90px; bottom:136px; "></div><div class="dot" style="left:92px; bottom:132px; "></div><div class="dot" style="left:94px; bottom:127px; "></div><div class="dot" style="left:96px; bottom:123px; "></div><div class="dot" style="left:98px; bottom:118px; "></div><div class="dot" style="left:100px; bottom:113px; "></div><div class="dot" style="left:102px; bottom:107px; "></div><div class="dot" style="left:104px; bottom:101px; "></div><div class="dot" style="left:106px; bottom:95px; "></div><div class="dot" style="left:108px; bottom:89px; "></div><div class="dot" style="left:110px; bottom:83px; "></div><div class="dot" style="left:112px; bottom:77px; "></div><div class="dot" style="left:114px; bottom:70px; "></div><div class="dot" style="left:116px; bottom:64px; "></div><div class="dot" style="left:118px; bottom:58px; "></div><div class="dot" style="left:120px; bottom:52px; "></div><div class="dot" style="left:122px; bottom:46px; "></div><div class="dot" style="left:124px; bottom:40px; "></div><div class="dot" style="left:126px; bottom:35px; "></div><div class="dot" style="left:128px; bottom:30px; "></div><div class="dot" style="left:130px; bottom:25px; "></div><div class="dot" style="left:132px; bottom:20px; "></div><div class="dot" style="left:134px; bottom:16px; "></div><div class="dot" style="left:136px; bottom:13px; "></div><div class="dot" style="left:138px; bottom:9px; "></div><div class="dot" style="left:140px; bottom:6px; "></div><div class="dot" style="left:142px; bottom:4px; "></div><div class="dot" style="left:144px; bottom:2px; "></div><div class="dot" style="left:146px; bottom:1px; "></div><div class="dot" style="left:148px; bottom:0px; "></div><div class="dot" style="left:150px; bottom:0px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">pulse</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:2px; "></div><div class="dot" style="left:4px; bottom:6px; "></div><div class="dot" style="left:6px; bottom:14px; "></div><div class="dot" style="left:8px; bottom:25px; "></div><div class="dot" style="left:10px; bottom:37px; "></div><div class="dot" style="left:12px; bottom:52px; "></div><div class="dot" style="left:14px; bottom:67px; "></div><div class="dot" style="left:16px; bottom:83px; "></div><div class="dot" style="left:18px; bottom:98px; "></div><div class="dot" style="left:20px; bottom:112px; "></div><div class="dot" style="left:22px; bottom:125px; "></div><div class="dot" style="left:24px; bottom:136px; "></div><div class="dot" style="left:26px; bottom:144px; "></div><div class="dot" style="left:28px; bottom:148px; "></div><div class="dot" style="left:30px; bottom:150px; "></div><div class="dot" style="left:32px; bottom:148px; "></div><div class="dot" style="left:34px; bottom:144px; "></div><div class="dot" style="left:36px; bottom:136px; "></div><div class="dot" style="left:38px; bottom:125px; "></div><div class="dot" style="left:40px; bottom:113px; "></div><div class="dot" style="left:42px; bottom:98px; "></div><div class="dot" style="left:44px; bottom:83px; "></div><div class="dot" style="left:46px; bottom:67px; "></div><div class="dot" style="left:48px; bottom:52px; "></div><div class="dot" style="left:50px; bottom:38px; "></div><div class="dot" style="left:52px; bottom:25px; "></div><div class="dot" style="left:54px; bottom:14px; "></div><div class="dot" style="left:56px; bottom:6px; "></div><div class="dot" style="left:58px; bottom:2px; "></div><div class="dot" style="left:60px; bottom:0px; "></div><div class="dot" style="left:62px; bottom:2px; "></div><div class="dot" style="left:64px; bottom:6px; "></div><div class="dot" style="left:66px; bottom:14px; "></div><div class="dot" style="left:68px; bottom:25px; "></div><div class="dot" style="left:70px; bottom:38px; "></div><div class="dot" style="left:72px; bottom:52px; "></div><div class="dot" style="left:74px; bottom:67px; "></div><div class="dot" style="left:76px; bottom:83px; "></div><div class="dot" style="left:78px; bottom:98px; "></div><div class="dot" style="left:80px; bottom:112px; "></div><div class="dot" style="left:82px; bottom:125px; "></div><div class="dot" style="left:84px; bottom:136px; "></div><div class="dot" style="left:86px; bottom:144px; "></div><div class="dot" style="left:88px; bottom:148px; "></div><div class="dot" style="left:90px; bottom:150px; "></div><div class="dot" style="left:92px; bottom:148px; "></div><div class="dot" style="left:94px; bottom:144px; "></div><div class="dot" style="left:96px; bottom:136px; "></div><div class="dot" style="left:98px; bottom:125px; "></div><div class="dot" style="left:100px; bottom:113px; "></div><div class="dot" style="left:102px; bottom:98px; "></div><div class="dot" style="left:104px; bottom:83px; "></div><div class="dot" style="left:106px; bottom:67px; "></div><div class="dot" style="left:108px; bottom:52px; "></div><div class="dot" style="left:110px; bottom:38px; "></div><div class="dot" style="left:112px; bottom:25px; "></div><div class="dot" style="left:114px; bottom:14px; "></div><div class="dot" style="left:116px; bottom:6px; "></div><div class="dot" style="left:118px; bottom:2px; "></div><div class="dot" style="left:120px; bottom:0px; "></div><div class="dot" style="left:122px; bottom:2px; "></div><div class="dot" style="left:124px; bottom:6px; "></div><div class="dot" style="left:126px; bottom:14px; "></div><div class="dot" style="left:128px; bottom:25px; "></div><div class="dot" style="left:130px; bottom:38px; "></div><div class="dot" style="left:132px; bottom:52px; "></div><div class="dot" style="left:134px; bottom:67px; "></div><div class="dot" style="left:136px; bottom:83px; "></div><div class="dot" style="left:138px; bottom:98px; "></div><div class="dot" style="left:140px; bottom:113px; "></div><div class="dot" style="left:142px; bottom:125px; "></div><div class="dot" style="left:144px; bottom:136px; "></div><div class="dot" style="left:146px; bottom:144px; "></div><div class="dot" style="left:148px; bottom:148px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				jindo.Effect.pulse(3) 적용 예제
			</td>
		</tr>
		
		<tr>
			<td class="name">wave</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:6px; "></div><div class="dot" style="left:4px; bottom:12px; "></div><div class="dot" style="left:6px; bottom:18px; "></div><div class="dot" style="left:8px; bottom:23px; "></div><div class="dot" style="left:10px; bottom:28px; "></div><div class="dot" style="left:12px; bottom:32px; "></div><div class="dot" style="left:14px; bottom:35px; "></div><div class="dot" style="left:16px; bottom:37px; "></div><div class="dot" style="left:18px; bottom:37px; "></div><div class="dot" style="left:20px; bottom:37px; "></div><div class="dot" style="left:22px; bottom:36px; "></div><div class="dot" style="left:24px; bottom:34px; "></div><div class="dot" style="left:26px; bottom:31px; "></div><div class="dot" style="left:28px; bottom:27px; "></div><div class="dot" style="left:30px; bottom:22px; "></div><div class="dot" style="left:32px; bottom:17px; "></div><div class="dot" style="left:34px; bottom:11px; "></div><div class="dot" style="left:36px; bottom:5px; "></div><div class="dot" style="left:38px; bottom:-2px; "></div><div class="dot" style="left:40px; bottom:-8px; "></div><div class="dot" style="left:42px; bottom:-14px; "></div><div class="dot" style="left:44px; bottom:-19px; "></div><div class="dot" style="left:46px; bottom:-25px; "></div><div class="dot" style="left:48px; bottom:-29px; "></div><div class="dot" style="left:50px; bottom:-32px; "></div><div class="dot" style="left:52px; bottom:-35px; "></div><div class="dot" style="left:54px; bottom:-37px; "></div><div class="dot" style="left:56px; bottom:-37px; "></div><div class="dot" style="left:58px; bottom:-37px; "></div><div class="dot" style="left:60px; bottom:-36px; "></div><div class="dot" style="left:62px; bottom:-33px; "></div><div class="dot" style="left:64px; bottom:-30px; "></div><div class="dot" style="left:66px; bottom:-26px; "></div><div class="dot" style="left:68px; bottom:-21px; "></div><div class="dot" style="left:70px; bottom:-15px; "></div><div class="dot" style="left:72px; bottom:-9px; "></div><div class="dot" style="left:74px; bottom:-3px; "></div><div class="dot" style="left:76px; bottom:3px; "></div><div class="dot" style="left:78px; bottom:9px; "></div><div class="dot" style="left:80px; bottom:15px; "></div><div class="dot" style="left:82px; bottom:21px; "></div><div class="dot" style="left:84px; bottom:26px; "></div><div class="dot" style="left:86px; bottom:30px; "></div><div class="dot" style="left:88px; bottom:33px; "></div><div class="dot" style="left:90px; bottom:36px; "></div><div class="dot" style="left:92px; bottom:37px; "></div><div class="dot" style="left:94px; bottom:37px; "></div><div class="dot" style="left:96px; bottom:37px; "></div><div class="dot" style="left:98px; bottom:35px; "></div><div class="dot" style="left:100px; bottom:32px; "></div><div class="dot" style="left:102px; bottom:29px; "></div><div class="dot" style="left:104px; bottom:25px; "></div><div class="dot" style="left:106px; bottom:19px; "></div><div class="dot" style="left:108px; bottom:14px; "></div><div class="dot" style="left:110px; bottom:8px; "></div><div class="dot" style="left:112px; bottom:2px; "></div><div class="dot" style="left:114px; bottom:-5px; "></div><div class="dot" style="left:116px; bottom:-11px; "></div><div class="dot" style="left:118px; bottom:-17px; "></div><div class="dot" style="left:120px; bottom:-22px; "></div><div class="dot" style="left:122px; bottom:-27px; "></div><div class="dot" style="left:124px; bottom:-31px; "></div><div class="dot" style="left:126px; bottom:-34px; "></div><div class="dot" style="left:128px; bottom:-36px; "></div><div class="dot" style="left:130px; bottom:-37px; "></div><div class="dot" style="left:132px; bottom:-37px; "></div><div class="dot" style="left:134px; bottom:-37px; "></div><div class="dot" style="left:136px; bottom:-35px; "></div><div class="dot" style="left:138px; bottom:-32px; "></div><div class="dot" style="left:140px; bottom:-28px; "></div><div class="dot" style="left:142px; bottom:-23px; "></div><div class="dot" style="left:144px; bottom:-18px; "></div><div class="dot" style="left:146px; bottom:-12px; "></div><div class="dot" style="left:148px; bottom:-6px; "></div><div class="dot" style="left:150px; bottom:0px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				jindo.Effect.wave(2, 0.25) 적용 예제
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInSine</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:1px; "></div><div class="dot" style="left:10px; bottom:1px; "></div><div class="dot" style="left:12px; bottom:1px; "></div><div class="dot" style="left:14px; bottom:2px; "></div><div class="dot" style="left:16px; bottom:2px; "></div><div class="dot" style="left:18px; bottom:3px; "></div><div class="dot" style="left:20px; bottom:3px; "></div><div class="dot" style="left:22px; bottom:4px; "></div><div class="dot" style="left:24px; bottom:5px; "></div><div class="dot" style="left:26px; bottom:6px; "></div><div class="dot" style="left:28px; bottom:6px; "></div><div class="dot" style="left:30px; bottom:7px; "></div><div class="dot" style="left:32px; bottom:8px; "></div><div class="dot" style="left:34px; bottom:9px; "></div><div class="dot" style="left:36px; bottom:11px; "></div><div class="dot" style="left:38px; bottom:12px; "></div><div class="dot" style="left:40px; bottom:13px; "></div><div class="dot" style="left:42px; bottom:14px; "></div><div class="dot" style="left:44px; bottom:16px; "></div><div class="dot" style="left:46px; bottom:17px; "></div><div class="dot" style="left:48px; bottom:19px; "></div><div class="dot" style="left:50px; bottom:20px; "></div><div class="dot" style="left:52px; bottom:22px; "></div><div class="dot" style="left:54px; bottom:23px; "></div><div class="dot" style="left:56px; bottom:25px; "></div><div class="dot" style="left:58px; bottom:27px; "></div><div class="dot" style="left:60px; bottom:29px; "></div><div class="dot" style="left:62px; bottom:31px; "></div><div class="dot" style="left:64px; bottom:32px; "></div><div class="dot" style="left:66px; bottom:34px; "></div><div class="dot" style="left:68px; bottom:36px; "></div><div class="dot" style="left:70px; bottom:39px; "></div><div class="dot" style="left:72px; bottom:41px; "></div><div class="dot" style="left:74px; bottom:43px; "></div><div class="dot" style="left:76px; bottom:45px; "></div><div class="dot" style="left:78px; bottom:47px; "></div><div class="dot" style="left:80px; bottom:50px; "></div><div class="dot" style="left:82px; bottom:52px; "></div><div class="dot" style="left:84px; bottom:54px; "></div><div class="dot" style="left:86px; bottom:57px; "></div><div class="dot" style="left:88px; bottom:59px; "></div><div class="dot" style="left:90px; bottom:62px; "></div><div class="dot" style="left:92px; bottom:64px; "></div><div class="dot" style="left:94px; bottom:67px; "></div><div class="dot" style="left:96px; bottom:70px; "></div><div class="dot" style="left:98px; bottom:72px; "></div><div class="dot" style="left:100px; bottom:75px; "></div><div class="dot" style="left:102px; bottom:78px; "></div><div class="dot" style="left:104px; bottom:81px; "></div><div class="dot" style="left:106px; bottom:83px; "></div><div class="dot" style="left:108px; bottom:86px; "></div><div class="dot" style="left:110px; bottom:89px; "></div><div class="dot" style="left:112px; bottom:92px; "></div><div class="dot" style="left:114px; bottom:95px; "></div><div class="dot" style="left:116px; bottom:98px; "></div><div class="dot" style="left:118px; bottom:101px; "></div><div class="dot" style="left:120px; bottom:104px; "></div><div class="dot" style="left:122px; bottom:107px; "></div><div class="dot" style="left:124px; bottom:110px; "></div><div class="dot" style="left:126px; bottom:113px; "></div><div class="dot" style="left:128px; bottom:116px; "></div><div class="dot" style="left:130px; bottom:119px; "></div><div class="dot" style="left:132px; bottom:122px; "></div><div class="dot" style="left:134px; bottom:125px; "></div><div class="dot" style="left:136px; bottom:128px; "></div><div class="dot" style="left:138px; bottom:131px; "></div><div class="dot" style="left:140px; bottom:134px; "></div><div class="dot" style="left:142px; bottom:137px; "></div><div class="dot" style="left:144px; bottom:141px; "></div><div class="dot" style="left:146px; bottom:144px; "></div><div class="dot" style="left:148px; bottom:147px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutSine</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:3px; "></div><div class="dot" style="left:4px; bottom:6px; "></div><div class="dot" style="left:6px; bottom:9px; "></div><div class="dot" style="left:8px; bottom:13px; "></div><div class="dot" style="left:10px; bottom:16px; "></div><div class="dot" style="left:12px; bottom:19px; "></div><div class="dot" style="left:14px; bottom:22px; "></div><div class="dot" style="left:16px; bottom:25px; "></div><div class="dot" style="left:18px; bottom:28px; "></div><div class="dot" style="left:20px; bottom:31px; "></div><div class="dot" style="left:22px; bottom:34px; "></div><div class="dot" style="left:24px; bottom:37px; "></div><div class="dot" style="left:26px; bottom:40px; "></div><div class="dot" style="left:28px; bottom:43px; "></div><div class="dot" style="left:30px; bottom:46px; "></div><div class="dot" style="left:32px; bottom:49px; "></div><div class="dot" style="left:34px; bottom:52px; "></div><div class="dot" style="left:36px; bottom:55px; "></div><div class="dot" style="left:38px; bottom:58px; "></div><div class="dot" style="left:40px; bottom:61px; "></div><div class="dot" style="left:42px; bottom:64px; "></div><div class="dot" style="left:44px; bottom:67px; "></div><div class="dot" style="left:46px; bottom:69px; "></div><div class="dot" style="left:48px; bottom:72px; "></div><div class="dot" style="left:50px; bottom:75px; "></div><div class="dot" style="left:52px; bottom:78px; "></div><div class="dot" style="left:54px; bottom:80px; "></div><div class="dot" style="left:56px; bottom:83px; "></div><div class="dot" style="left:58px; bottom:86px; "></div><div class="dot" style="left:60px; bottom:88px; "></div><div class="dot" style="left:62px; bottom:91px; "></div><div class="dot" style="left:64px; bottom:93px; "></div><div class="dot" style="left:66px; bottom:96px; "></div><div class="dot" style="left:68px; bottom:98px; "></div><div class="dot" style="left:70px; bottom:100px; "></div><div class="dot" style="left:72px; bottom:103px; "></div><div class="dot" style="left:74px; bottom:105px; "></div><div class="dot" style="left:76px; bottom:107px; "></div><div class="dot" style="left:78px; bottom:109px; "></div><div class="dot" style="left:80px; bottom:111px; "></div><div class="dot" style="left:82px; bottom:114px; "></div><div class="dot" style="left:84px; bottom:116px; "></div><div class="dot" style="left:86px; bottom:118px; "></div><div class="dot" style="left:88px; bottom:119px; "></div><div class="dot" style="left:90px; bottom:121px; "></div><div class="dot" style="left:92px; bottom:123px; "></div><div class="dot" style="left:94px; bottom:125px; "></div><div class="dot" style="left:96px; bottom:127px; "></div><div class="dot" style="left:98px; bottom:128px; "></div><div class="dot" style="left:100px; bottom:130px; "></div><div class="dot" style="left:102px; bottom:131px; "></div><div class="dot" style="left:104px; bottom:133px; "></div><div class="dot" style="left:106px; bottom:134px; "></div><div class="dot" style="left:108px; bottom:136px; "></div><div class="dot" style="left:110px; bottom:137px; "></div><div class="dot" style="left:112px; bottom:138px; "></div><div class="dot" style="left:114px; bottom:139px; "></div><div class="dot" style="left:116px; bottom:141px; "></div><div class="dot" style="left:118px; bottom:142px; "></div><div class="dot" style="left:120px; bottom:143px; "></div><div class="dot" style="left:122px; bottom:144px; "></div><div class="dot" style="left:124px; bottom:144px; "></div><div class="dot" style="left:126px; bottom:145px; "></div><div class="dot" style="left:128px; bottom:146px; "></div><div class="dot" style="left:130px; bottom:147px; "></div><div class="dot" style="left:132px; bottom:147px; "></div><div class="dot" style="left:134px; bottom:148px; "></div><div class="dot" style="left:136px; bottom:148px; "></div><div class="dot" style="left:138px; bottom:149px; "></div><div class="dot" style="left:140px; bottom:149px; "></div><div class="dot" style="left:142px; bottom:149px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInOutSine</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:1px; "></div><div class="dot" style="left:8px; bottom:1px; "></div><div class="dot" style="left:10px; bottom:2px; "></div><div class="dot" style="left:12px; bottom:2px; "></div><div class="dot" style="left:14px; bottom:3px; "></div><div class="dot" style="left:16px; bottom:4px; "></div><div class="dot" style="left:18px; bottom:5px; "></div><div class="dot" style="left:20px; bottom:6px; "></div><div class="dot" style="left:22px; bottom:8px; "></div><div class="dot" style="left:24px; bottom:9px; "></div><div class="dot" style="left:26px; bottom:11px; "></div><div class="dot" style="left:28px; bottom:13px; "></div><div class="dot" style="left:30px; bottom:14px; "></div><div class="dot" style="left:32px; bottom:16px; "></div><div class="dot" style="left:34px; bottom:18px; "></div><div class="dot" style="left:36px; bottom:20px; "></div><div class="dot" style="left:38px; bottom:23px; "></div><div class="dot" style="left:40px; bottom:25px; "></div><div class="dot" style="left:42px; bottom:27px; "></div><div class="dot" style="left:44px; bottom:30px; "></div><div class="dot" style="left:46px; bottom:32px; "></div><div class="dot" style="left:48px; bottom:35px; "></div><div class="dot" style="left:50px; bottom:37px; "></div><div class="dot" style="left:52px; bottom:40px; "></div><div class="dot" style="left:54px; bottom:43px; "></div><div class="dot" style="left:56px; bottom:46px; "></div><div class="dot" style="left:58px; bottom:49px; "></div><div class="dot" style="left:60px; bottom:52px; "></div><div class="dot" style="left:62px; bottom:55px; "></div><div class="dot" style="left:64px; bottom:58px; "></div><div class="dot" style="left:66px; bottom:61px; "></div><div class="dot" style="left:68px; bottom:64px; "></div><div class="dot" style="left:70px; bottom:67px; "></div><div class="dot" style="left:72px; bottom:70px; "></div><div class="dot" style="left:74px; bottom:73px; "></div><div class="dot" style="left:76px; bottom:77px; "></div><div class="dot" style="left:78px; bottom:80px; "></div><div class="dot" style="left:80px; bottom:83px; "></div><div class="dot" style="left:82px; bottom:86px; "></div><div class="dot" style="left:84px; bottom:89px; "></div><div class="dot" style="left:86px; bottom:92px; "></div><div class="dot" style="left:88px; bottom:95px; "></div><div class="dot" style="left:90px; bottom:98px; "></div><div class="dot" style="left:92px; bottom:101px; "></div><div class="dot" style="left:94px; bottom:104px; "></div><div class="dot" style="left:96px; bottom:107px; "></div><div class="dot" style="left:98px; bottom:110px; "></div><div class="dot" style="left:100px; bottom:112px; "></div><div class="dot" style="left:102px; bottom:115px; "></div><div class="dot" style="left:104px; bottom:118px; "></div><div class="dot" style="left:106px; bottom:120px; "></div><div class="dot" style="left:108px; bottom:123px; "></div><div class="dot" style="left:110px; bottom:125px; "></div><div class="dot" style="left:112px; bottom:127px; "></div><div class="dot" style="left:114px; bottom:130px; "></div><div class="dot" style="left:116px; bottom:132px; "></div><div class="dot" style="left:118px; bottom:134px; "></div><div class="dot" style="left:120px; bottom:136px; "></div><div class="dot" style="left:122px; bottom:137px; "></div><div class="dot" style="left:124px; bottom:139px; "></div><div class="dot" style="left:126px; bottom:141px; "></div><div class="dot" style="left:128px; bottom:142px; "></div><div class="dot" style="left:130px; bottom:144px; "></div><div class="dot" style="left:132px; bottom:145px; "></div><div class="dot" style="left:134px; bottom:146px; "></div><div class="dot" style="left:136px; bottom:147px; "></div><div class="dot" style="left:138px; bottom:148px; "></div><div class="dot" style="left:140px; bottom:148px; "></div><div class="dot" style="left:142px; bottom:149px; "></div><div class="dot" style="left:144px; bottom:149px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutInSine</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:3px; "></div><div class="dot" style="left:4px; bottom:6px; "></div><div class="dot" style="left:6px; bottom:9px; "></div><div class="dot" style="left:8px; bottom:13px; "></div><div class="dot" style="left:10px; bottom:16px; "></div><div class="dot" style="left:12px; bottom:19px; "></div><div class="dot" style="left:14px; bottom:22px; "></div><div class="dot" style="left:16px; bottom:25px; "></div><div class="dot" style="left:18px; bottom:28px; "></div><div class="dot" style="left:20px; bottom:31px; "></div><div class="dot" style="left:22px; bottom:33px; "></div><div class="dot" style="left:24px; bottom:36px; "></div><div class="dot" style="left:26px; bottom:39px; "></div><div class="dot" style="left:28px; bottom:42px; "></div><div class="dot" style="left:30px; bottom:44px; "></div><div class="dot" style="left:32px; bottom:47px; "></div><div class="dot" style="left:34px; bottom:49px; "></div><div class="dot" style="left:36px; bottom:51px; "></div><div class="dot" style="left:38px; bottom:54px; "></div><div class="dot" style="left:40px; bottom:56px; "></div><div class="dot" style="left:42px; bottom:58px; "></div><div class="dot" style="left:44px; bottom:60px; "></div><div class="dot" style="left:46px; bottom:62px; "></div><div class="dot" style="left:48px; bottom:63px; "></div><div class="dot" style="left:50px; bottom:65px; "></div><div class="dot" style="left:52px; bottom:66px; "></div><div class="dot" style="left:54px; bottom:68px; "></div><div class="dot" style="left:56px; bottom:69px; "></div><div class="dot" style="left:58px; bottom:70px; "></div><div class="dot" style="left:60px; bottom:71px; "></div><div class="dot" style="left:62px; bottom:72px; "></div><div class="dot" style="left:64px; bottom:73px; "></div><div class="dot" style="left:66px; bottom:74px; "></div><div class="dot" style="left:68px; bottom:74px; "></div><div class="dot" style="left:70px; bottom:75px; "></div><div class="dot" style="left:72px; bottom:75px; "></div><div class="dot" style="left:74px; bottom:75px; "></div><div class="dot" style="left:76px; bottom:75px; "></div><div class="dot" style="left:78px; bottom:75px; "></div><div class="dot" style="left:80px; bottom:75px; "></div><div class="dot" style="left:82px; bottom:76px; "></div><div class="dot" style="left:84px; bottom:76px; "></div><div class="dot" style="left:86px; bottom:77px; "></div><div class="dot" style="left:88px; bottom:78px; "></div><div class="dot" style="left:90px; bottom:79px; "></div><div class="dot" style="left:92px; bottom:80px; "></div><div class="dot" style="left:94px; bottom:81px; "></div><div class="dot" style="left:96px; bottom:82px; "></div><div class="dot" style="left:98px; bottom:84px; "></div><div class="dot" style="left:100px; bottom:85px; "></div><div class="dot" style="left:102px; bottom:87px; "></div><div class="dot" style="left:104px; bottom:88px; "></div><div class="dot" style="left:106px; bottom:90px; "></div><div class="dot" style="left:108px; bottom:92px; "></div><div class="dot" style="left:110px; bottom:94px; "></div><div class="dot" style="left:112px; bottom:96px; "></div><div class="dot" style="left:114px; bottom:99px; "></div><div class="dot" style="left:116px; bottom:101px; "></div><div class="dot" style="left:118px; bottom:103px; "></div><div class="dot" style="left:120px; bottom:106px; "></div><div class="dot" style="left:122px; bottom:108px; "></div><div class="dot" style="left:124px; bottom:111px; "></div><div class="dot" style="left:126px; bottom:114px; "></div><div class="dot" style="left:128px; bottom:117px; "></div><div class="dot" style="left:130px; bottom:119px; "></div><div class="dot" style="left:132px; bottom:122px; "></div><div class="dot" style="left:134px; bottom:125px; "></div><div class="dot" style="left:136px; bottom:128px; "></div><div class="dot" style="left:138px; bottom:131px; "></div><div class="dot" style="left:140px; bottom:134px; "></div><div class="dot" style="left:142px; bottom:137px; "></div><div class="dot" style="left:144px; bottom:141px; "></div><div class="dot" style="left:146px; bottom:144px; "></div><div class="dot" style="left:148px; bottom:147px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInQuad</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:1px; "></div><div class="dot" style="left:12px; bottom:1px; "></div><div class="dot" style="left:14px; bottom:1px; "></div><div class="dot" style="left:16px; bottom:2px; "></div><div class="dot" style="left:18px; bottom:2px; "></div><div class="dot" style="left:20px; bottom:3px; "></div><div class="dot" style="left:22px; bottom:3px; "></div><div class="dot" style="left:24px; bottom:4px; "></div><div class="dot" style="left:26px; bottom:5px; "></div><div class="dot" style="left:28px; bottom:5px; "></div><div class="dot" style="left:30px; bottom:6px; "></div><div class="dot" style="left:32px; bottom:7px; "></div><div class="dot" style="left:34px; bottom:8px; "></div><div class="dot" style="left:36px; bottom:9px; "></div><div class="dot" style="left:38px; bottom:10px; "></div><div class="dot" style="left:40px; bottom:11px; "></div><div class="dot" style="left:42px; bottom:12px; "></div><div class="dot" style="left:44px; bottom:13px; "></div><div class="dot" style="left:46px; bottom:14px; "></div><div class="dot" style="left:48px; bottom:15px; "></div><div class="dot" style="left:50px; bottom:17px; "></div><div class="dot" style="left:52px; bottom:18px; "></div><div class="dot" style="left:54px; bottom:19px; "></div><div class="dot" style="left:56px; bottom:21px; "></div><div class="dot" style="left:58px; bottom:22px; "></div><div class="dot" style="left:60px; bottom:24px; "></div><div class="dot" style="left:62px; bottom:26px; "></div><div class="dot" style="left:64px; bottom:27px; "></div><div class="dot" style="left:66px; bottom:29px; "></div><div class="dot" style="left:68px; bottom:31px; "></div><div class="dot" style="left:70px; bottom:33px; "></div><div class="dot" style="left:72px; bottom:35px; "></div><div class="dot" style="left:74px; bottom:37px; "></div><div class="dot" style="left:76px; bottom:39px; "></div><div class="dot" style="left:78px; bottom:41px; "></div><div class="dot" style="left:80px; bottom:43px; "></div><div class="dot" style="left:82px; bottom:45px; "></div><div class="dot" style="left:84px; bottom:47px; "></div><div class="dot" style="left:86px; bottom:49px; "></div><div class="dot" style="left:88px; bottom:52px; "></div><div class="dot" style="left:90px; bottom:54px; "></div><div class="dot" style="left:92px; bottom:56px; "></div><div class="dot" style="left:94px; bottom:59px; "></div><div class="dot" style="left:96px; bottom:61px; "></div><div class="dot" style="left:98px; bottom:64px; "></div><div class="dot" style="left:100px; bottom:67px; "></div><div class="dot" style="left:102px; bottom:69px; "></div><div class="dot" style="left:104px; bottom:72px; "></div><div class="dot" style="left:106px; bottom:75px; "></div><div class="dot" style="left:108px; bottom:78px; "></div><div class="dot" style="left:110px; bottom:81px; "></div><div class="dot" style="left:112px; bottom:84px; "></div><div class="dot" style="left:114px; bottom:87px; "></div><div class="dot" style="left:116px; bottom:90px; "></div><div class="dot" style="left:118px; bottom:93px; "></div><div class="dot" style="left:120px; bottom:96px; "></div><div class="dot" style="left:122px; bottom:99px; "></div><div class="dot" style="left:124px; bottom:103px; "></div><div class="dot" style="left:126px; bottom:106px; "></div><div class="dot" style="left:128px; bottom:109px; "></div><div class="dot" style="left:130px; bottom:113px; "></div><div class="dot" style="left:132px; bottom:116px; "></div><div class="dot" style="left:134px; bottom:120px; "></div><div class="dot" style="left:136px; bottom:123px; "></div><div class="dot" style="left:138px; bottom:127px; "></div><div class="dot" style="left:140px; bottom:131px; "></div><div class="dot" style="left:142px; bottom:134px; "></div><div class="dot" style="left:144px; bottom:138px; "></div><div class="dot" style="left:146px; bottom:142px; "></div><div class="dot" style="left:148px; bottom:146px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutQuad</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:4px; "></div><div class="dot" style="left:4px; bottom:8px; "></div><div class="dot" style="left:6px; bottom:12px; "></div><div class="dot" style="left:8px; bottom:16px; "></div><div class="dot" style="left:10px; bottom:19px; "></div><div class="dot" style="left:12px; bottom:23px; "></div><div class="dot" style="left:14px; bottom:27px; "></div><div class="dot" style="left:16px; bottom:30px; "></div><div class="dot" style="left:18px; bottom:34px; "></div><div class="dot" style="left:20px; bottom:37px; "></div><div class="dot" style="left:22px; bottom:41px; "></div><div class="dot" style="left:24px; bottom:44px; "></div><div class="dot" style="left:26px; bottom:47px; "></div><div class="dot" style="left:28px; bottom:51px; "></div><div class="dot" style="left:30px; bottom:54px; "></div><div class="dot" style="left:32px; bottom:57px; "></div><div class="dot" style="left:34px; bottom:60px; "></div><div class="dot" style="left:36px; bottom:63px; "></div><div class="dot" style="left:38px; bottom:66px; "></div><div class="dot" style="left:40px; bottom:69px; "></div><div class="dot" style="left:42px; bottom:72px; "></div><div class="dot" style="left:44px; bottom:75px; "></div><div class="dot" style="left:46px; bottom:78px; "></div><div class="dot" style="left:48px; bottom:81px; "></div><div class="dot" style="left:50px; bottom:83px; "></div><div class="dot" style="left:52px; bottom:86px; "></div><div class="dot" style="left:54px; bottom:89px; "></div><div class="dot" style="left:56px; bottom:91px; "></div><div class="dot" style="left:58px; bottom:94px; "></div><div class="dot" style="left:60px; bottom:96px; "></div><div class="dot" style="left:62px; bottom:98px; "></div><div class="dot" style="left:64px; bottom:101px; "></div><div class="dot" style="left:66px; bottom:103px; "></div><div class="dot" style="left:68px; bottom:105px; "></div><div class="dot" style="left:70px; bottom:107px; "></div><div class="dot" style="left:72px; bottom:109px; "></div><div class="dot" style="left:74px; bottom:111px; "></div><div class="dot" style="left:76px; bottom:113px; "></div><div class="dot" style="left:78px; bottom:115px; "></div><div class="dot" style="left:80px; bottom:117px; "></div><div class="dot" style="left:82px; bottom:119px; "></div><div class="dot" style="left:84px; bottom:121px; "></div><div class="dot" style="left:86px; bottom:123px; "></div><div class="dot" style="left:88px; bottom:124px; "></div><div class="dot" style="left:90px; bottom:126px; "></div><div class="dot" style="left:92px; bottom:128px; "></div><div class="dot" style="left:94px; bottom:129px; "></div><div class="dot" style="left:96px; bottom:131px; "></div><div class="dot" style="left:98px; bottom:132px; "></div><div class="dot" style="left:100px; bottom:133px; "></div><div class="dot" style="left:102px; bottom:135px; "></div><div class="dot" style="left:104px; bottom:136px; "></div><div class="dot" style="left:106px; bottom:137px; "></div><div class="dot" style="left:108px; bottom:138px; "></div><div class="dot" style="left:110px; bottom:139px; "></div><div class="dot" style="left:112px; bottom:140px; "></div><div class="dot" style="left:114px; bottom:141px; "></div><div class="dot" style="left:116px; bottom:142px; "></div><div class="dot" style="left:118px; bottom:143px; "></div><div class="dot" style="left:120px; bottom:144px; "></div><div class="dot" style="left:122px; bottom:145px; "></div><div class="dot" style="left:124px; bottom:145px; "></div><div class="dot" style="left:126px; bottom:146px; "></div><div class="dot" style="left:128px; bottom:147px; "></div><div class="dot" style="left:130px; bottom:147px; "></div><div class="dot" style="left:132px; bottom:148px; "></div><div class="dot" style="left:134px; bottom:148px; "></div><div class="dot" style="left:136px; bottom:149px; "></div><div class="dot" style="left:138px; bottom:149px; "></div><div class="dot" style="left:140px; bottom:149px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInOutQuad</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:1px; "></div><div class="dot" style="left:10px; bottom:1px; "></div><div class="dot" style="left:12px; bottom:2px; "></div><div class="dot" style="left:14px; bottom:3px; "></div><div class="dot" style="left:16px; bottom:3px; "></div><div class="dot" style="left:18px; bottom:4px; "></div><div class="dot" style="left:20px; bottom:5px; "></div><div class="dot" style="left:22px; bottom:6px; "></div><div class="dot" style="left:24px; bottom:8px; "></div><div class="dot" style="left:26px; bottom:9px; "></div><div class="dot" style="left:28px; bottom:10px; "></div><div class="dot" style="left:30px; bottom:12px; "></div><div class="dot" style="left:32px; bottom:14px; "></div><div class="dot" style="left:34px; bottom:15px; "></div><div class="dot" style="left:36px; bottom:17px; "></div><div class="dot" style="left:38px; bottom:19px; "></div><div class="dot" style="left:40px; bottom:21px; "></div><div class="dot" style="left:42px; bottom:24px; "></div><div class="dot" style="left:44px; bottom:26px; "></div><div class="dot" style="left:46px; bottom:28px; "></div><div class="dot" style="left:48px; bottom:31px; "></div><div class="dot" style="left:50px; bottom:33px; "></div><div class="dot" style="left:52px; bottom:36px; "></div><div class="dot" style="left:54px; bottom:39px; "></div><div class="dot" style="left:56px; bottom:42px; "></div><div class="dot" style="left:58px; bottom:45px; "></div><div class="dot" style="left:60px; bottom:48px; "></div><div class="dot" style="left:62px; bottom:51px; "></div><div class="dot" style="left:64px; bottom:55px; "></div><div class="dot" style="left:66px; bottom:58px; "></div><div class="dot" style="left:68px; bottom:62px; "></div><div class="dot" style="left:70px; bottom:65px; "></div><div class="dot" style="left:72px; bottom:69px; "></div><div class="dot" style="left:74px; bottom:73px; "></div><div class="dot" style="left:76px; bottom:77px; "></div><div class="dot" style="left:78px; bottom:81px; "></div><div class="dot" style="left:80px; bottom:85px; "></div><div class="dot" style="left:82px; bottom:88px; "></div><div class="dot" style="left:84px; bottom:92px; "></div><div class="dot" style="left:86px; bottom:95px; "></div><div class="dot" style="left:88px; bottom:99px; "></div><div class="dot" style="left:90px; bottom:102px; "></div><div class="dot" style="left:92px; bottom:105px; "></div><div class="dot" style="left:94px; bottom:108px; "></div><div class="dot" style="left:96px; bottom:111px; "></div><div class="dot" style="left:98px; bottom:114px; "></div><div class="dot" style="left:100px; bottom:117px; "></div><div class="dot" style="left:102px; bottom:119px; "></div><div class="dot" style="left:104px; bottom:122px; "></div><div class="dot" style="left:106px; bottom:124px; "></div><div class="dot" style="left:108px; bottom:126px; "></div><div class="dot" style="left:110px; bottom:129px; "></div><div class="dot" style="left:112px; bottom:131px; "></div><div class="dot" style="left:114px; bottom:133px; "></div><div class="dot" style="left:116px; bottom:135px; "></div><div class="dot" style="left:118px; bottom:136px; "></div><div class="dot" style="left:120px; bottom:138px; "></div><div class="dot" style="left:122px; bottom:140px; "></div><div class="dot" style="left:124px; bottom:141px; "></div><div class="dot" style="left:126px; bottom:142px; "></div><div class="dot" style="left:128px; bottom:144px; "></div><div class="dot" style="left:130px; bottom:145px; "></div><div class="dot" style="left:132px; bottom:146px; "></div><div class="dot" style="left:134px; bottom:147px; "></div><div class="dot" style="left:136px; bottom:147px; "></div><div class="dot" style="left:138px; bottom:148px; "></div><div class="dot" style="left:140px; bottom:149px; "></div><div class="dot" style="left:142px; bottom:149px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutInQuad</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:4px; "></div><div class="dot" style="left:4px; bottom:8px; "></div><div class="dot" style="left:6px; bottom:12px; "></div><div class="dot" style="left:8px; bottom:15px; "></div><div class="dot" style="left:10px; bottom:19px; "></div><div class="dot" style="left:12px; bottom:22px; "></div><div class="dot" style="left:14px; bottom:25px; "></div><div class="dot" style="left:16px; bottom:29px; "></div><div class="dot" style="left:18px; bottom:32px; "></div><div class="dot" style="left:20px; bottom:35px; "></div><div class="dot" style="left:22px; bottom:38px; "></div><div class="dot" style="left:24px; bottom:40px; "></div><div class="dot" style="left:26px; bottom:43px; "></div><div class="dot" style="left:28px; bottom:46px; "></div><div class="dot" style="left:30px; bottom:48px; "></div><div class="dot" style="left:32px; bottom:50px; "></div><div class="dot" style="left:34px; bottom:53px; "></div><div class="dot" style="left:36px; bottom:55px; "></div><div class="dot" style="left:38px; bottom:57px; "></div><div class="dot" style="left:40px; bottom:59px; "></div><div class="dot" style="left:42px; bottom:60px; "></div><div class="dot" style="left:44px; bottom:62px; "></div><div class="dot" style="left:46px; bottom:64px; "></div><div class="dot" style="left:48px; bottom:65px; "></div><div class="dot" style="left:50px; bottom:67px; "></div><div class="dot" style="left:52px; bottom:68px; "></div><div class="dot" style="left:54px; bottom:69px; "></div><div class="dot" style="left:56px; bottom:70px; "></div><div class="dot" style="left:58px; bottom:71px; "></div><div class="dot" style="left:60px; bottom:72px; "></div><div class="dot" style="left:62px; bottom:73px; "></div><div class="dot" style="left:64px; bottom:73px; "></div><div class="dot" style="left:66px; bottom:74px; "></div><div class="dot" style="left:68px; bottom:74px; "></div><div class="dot" style="left:70px; bottom:75px; "></div><div class="dot" style="left:72px; bottom:75px; "></div><div class="dot" style="left:74px; bottom:75px; "></div><div class="dot" style="left:76px; bottom:75px; "></div><div class="dot" style="left:78px; bottom:75px; "></div><div class="dot" style="left:80px; bottom:75px; "></div><div class="dot" style="left:82px; bottom:76px; "></div><div class="dot" style="left:84px; bottom:76px; "></div><div class="dot" style="left:86px; bottom:77px; "></div><div class="dot" style="left:88px; bottom:77px; "></div><div class="dot" style="left:90px; bottom:78px; "></div><div class="dot" style="left:92px; bottom:79px; "></div><div class="dot" style="left:94px; bottom:80px; "></div><div class="dot" style="left:96px; bottom:81px; "></div><div class="dot" style="left:98px; bottom:82px; "></div><div class="dot" style="left:100px; bottom:83px; "></div><div class="dot" style="left:102px; bottom:85px; "></div><div class="dot" style="left:104px; bottom:86px; "></div><div class="dot" style="left:106px; bottom:88px; "></div><div class="dot" style="left:108px; bottom:90px; "></div><div class="dot" style="left:110px; bottom:91px; "></div><div class="dot" style="left:112px; bottom:93px; "></div><div class="dot" style="left:114px; bottom:95px; "></div><div class="dot" style="left:116px; bottom:97px; "></div><div class="dot" style="left:118px; bottom:100px; "></div><div class="dot" style="left:120px; bottom:102px; "></div><div class="dot" style="left:122px; bottom:104px; "></div><div class="dot" style="left:124px; bottom:107px; "></div><div class="dot" style="left:126px; bottom:110px; "></div><div class="dot" style="left:128px; bottom:112px; "></div><div class="dot" style="left:130px; bottom:115px; "></div><div class="dot" style="left:132px; bottom:118px; "></div><div class="dot" style="left:134px; bottom:121px; "></div><div class="dot" style="left:136px; bottom:125px; "></div><div class="dot" style="left:138px; bottom:128px; "></div><div class="dot" style="left:140px; bottom:131px; "></div><div class="dot" style="left:142px; bottom:135px; "></div><div class="dot" style="left:144px; bottom:138px; "></div><div class="dot" style="left:146px; bottom:142px; "></div><div class="dot" style="left:148px; bottom:146px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeIn</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:0px; "></div><div class="dot" style="left:18px; bottom:0px; "></div><div class="dot" style="left:20px; bottom:0px; "></div><div class="dot" style="left:22px; bottom:0px; "></div><div class="dot" style="left:24px; bottom:1px; "></div><div class="dot" style="left:26px; bottom:1px; "></div><div class="dot" style="left:28px; bottom:1px; "></div><div class="dot" style="left:30px; bottom:1px; "></div><div class="dot" style="left:32px; bottom:1px; "></div><div class="dot" style="left:34px; bottom:2px; "></div><div class="dot" style="left:36px; bottom:2px; "></div><div class="dot" style="left:38px; bottom:2px; "></div><div class="dot" style="left:40px; bottom:3px; "></div><div class="dot" style="left:42px; bottom:3px; "></div><div class="dot" style="left:44px; bottom:4px; "></div><div class="dot" style="left:46px; bottom:4px; "></div><div class="dot" style="left:48px; bottom:5px; "></div><div class="dot" style="left:50px; bottom:6px; "></div><div class="dot" style="left:52px; bottom:6px; "></div><div class="dot" style="left:54px; bottom:7px; "></div><div class="dot" style="left:56px; bottom:8px; "></div><div class="dot" style="left:58px; bottom:9px; "></div><div class="dot" style="left:60px; bottom:10px; "></div><div class="dot" style="left:62px; bottom:11px; "></div><div class="dot" style="left:64px; bottom:12px; "></div><div class="dot" style="left:66px; bottom:13px; "></div><div class="dot" style="left:68px; bottom:14px; "></div><div class="dot" style="left:70px; bottom:15px; "></div><div class="dot" style="left:72px; bottom:17px; "></div><div class="dot" style="left:74px; bottom:18px; "></div><div class="dot" style="left:76px; bottom:20px; "></div><div class="dot" style="left:78px; bottom:21px; "></div><div class="dot" style="left:80px; bottom:23px; "></div><div class="dot" style="left:82px; bottom:25px; "></div><div class="dot" style="left:84px; bottom:26px; "></div><div class="dot" style="left:86px; bottom:28px; "></div><div class="dot" style="left:88px; bottom:30px; "></div><div class="dot" style="left:90px; bottom:32px; "></div><div class="dot" style="left:92px; bottom:35px; "></div><div class="dot" style="left:94px; bottom:37px; "></div><div class="dot" style="left:96px; bottom:39px; "></div><div class="dot" style="left:98px; bottom:42px; "></div><div class="dot" style="left:100px; bottom:44px; "></div><div class="dot" style="left:102px; bottom:47px; "></div><div class="dot" style="left:104px; bottom:50px; "></div><div class="dot" style="left:106px; bottom:53px; "></div><div class="dot" style="left:108px; bottom:56px; "></div><div class="dot" style="left:110px; bottom:59px; "></div><div class="dot" style="left:112px; bottom:62px; "></div><div class="dot" style="left:114px; bottom:66px; "></div><div class="dot" style="left:116px; bottom:69px; "></div><div class="dot" style="left:118px; bottom:73px; "></div><div class="dot" style="left:120px; bottom:77px; "></div><div class="dot" style="left:122px; bottom:81px; "></div><div class="dot" style="left:124px; bottom:85px; "></div><div class="dot" style="left:126px; bottom:89px; "></div><div class="dot" style="left:128px; bottom:93px; "></div><div class="dot" style="left:130px; bottom:98px; "></div><div class="dot" style="left:132px; bottom:102px; "></div><div class="dot" style="left:134px; bottom:107px; "></div><div class="dot" style="left:136px; bottom:112px; "></div><div class="dot" style="left:138px; bottom:117px; "></div><div class="dot" style="left:140px; bottom:122px; "></div><div class="dot" style="left:142px; bottom:127px; "></div><div class="dot" style="left:144px; bottom:133px; "></div><div class="dot" style="left:146px; bottom:138px; "></div><div class="dot" style="left:148px; bottom:144px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				jindo.Effect.easeInCubic과 동일
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOut</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:6px; "></div><div class="dot" style="left:4px; bottom:12px; "></div><div class="dot" style="left:6px; bottom:17px; "></div><div class="dot" style="left:8px; bottom:23px; "></div><div class="dot" style="left:10px; bottom:28px; "></div><div class="dot" style="left:12px; bottom:33px; "></div><div class="dot" style="left:14px; bottom:38px; "></div><div class="dot" style="left:16px; bottom:43px; "></div><div class="dot" style="left:18px; bottom:48px; "></div><div class="dot" style="left:20px; bottom:52px; "></div><div class="dot" style="left:22px; bottom:57px; "></div><div class="dot" style="left:24px; bottom:61px; "></div><div class="dot" style="left:26px; bottom:65px; "></div><div class="dot" style="left:28px; bottom:69px; "></div><div class="dot" style="left:30px; bottom:73px; "></div><div class="dot" style="left:32px; bottom:77px; "></div><div class="dot" style="left:34px; bottom:81px; "></div><div class="dot" style="left:36px; bottom:84px; "></div><div class="dot" style="left:38px; bottom:88px; "></div><div class="dot" style="left:40px; bottom:91px; "></div><div class="dot" style="left:42px; bottom:94px; "></div><div class="dot" style="left:44px; bottom:97px; "></div><div class="dot" style="left:46px; bottom:100px; "></div><div class="dot" style="left:48px; bottom:103px; "></div><div class="dot" style="left:50px; bottom:106px; "></div><div class="dot" style="left:52px; bottom:108px; "></div><div class="dot" style="left:54px; bottom:111px; "></div><div class="dot" style="left:56px; bottom:113px; "></div><div class="dot" style="left:58px; bottom:115px; "></div><div class="dot" style="left:60px; bottom:118px; "></div><div class="dot" style="left:62px; bottom:120px; "></div><div class="dot" style="left:64px; bottom:122px; "></div><div class="dot" style="left:66px; bottom:124px; "></div><div class="dot" style="left:68px; bottom:125px; "></div><div class="dot" style="left:70px; bottom:127px; "></div><div class="dot" style="left:72px; bottom:129px; "></div><div class="dot" style="left:74px; bottom:130px; "></div><div class="dot" style="left:76px; bottom:132px; "></div><div class="dot" style="left:78px; bottom:133px; "></div><div class="dot" style="left:80px; bottom:135px; "></div><div class="dot" style="left:82px; bottom:136px; "></div><div class="dot" style="left:84px; bottom:137px; "></div><div class="dot" style="left:86px; bottom:138px; "></div><div class="dot" style="left:88px; bottom:139px; "></div><div class="dot" style="left:90px; bottom:140px; "></div><div class="dot" style="left:92px; bottom:141px; "></div><div class="dot" style="left:94px; bottom:142px; "></div><div class="dot" style="left:96px; bottom:143px; "></div><div class="dot" style="left:98px; bottom:144px; "></div><div class="dot" style="left:100px; bottom:144px; "></div><div class="dot" style="left:102px; bottom:145px; "></div><div class="dot" style="left:104px; bottom:146px; "></div><div class="dot" style="left:106px; bottom:146px; "></div><div class="dot" style="left:108px; bottom:147px; "></div><div class="dot" style="left:110px; bottom:147px; "></div><div class="dot" style="left:112px; bottom:148px; "></div><div class="dot" style="left:114px; bottom:148px; "></div><div class="dot" style="left:116px; bottom:148px; "></div><div class="dot" style="left:118px; bottom:149px; "></div><div class="dot" style="left:120px; bottom:149px; "></div><div class="dot" style="left:122px; bottom:149px; "></div><div class="dot" style="left:124px; bottom:149px; "></div><div class="dot" style="left:126px; bottom:149px; "></div><div class="dot" style="left:128px; bottom:150px; "></div><div class="dot" style="left:130px; bottom:150px; "></div><div class="dot" style="left:132px; bottom:150px; "></div><div class="dot" style="left:134px; bottom:150px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInOut</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:1px; "></div><div class="dot" style="left:18px; bottom:1px; "></div><div class="dot" style="left:20px; bottom:1px; "></div><div class="dot" style="left:22px; bottom:2px; "></div><div class="dot" style="left:24px; bottom:2px; "></div><div class="dot" style="left:26px; bottom:3px; "></div><div class="dot" style="left:28px; bottom:4px; "></div><div class="dot" style="left:30px; bottom:5px; "></div><div class="dot" style="left:32px; bottom:6px; "></div><div class="dot" style="left:34px; bottom:7px; "></div><div class="dot" style="left:36px; bottom:8px; "></div><div class="dot" style="left:38px; bottom:10px; "></div><div class="dot" style="left:40px; bottom:11px; "></div><div class="dot" style="left:42px; bottom:13px; "></div><div class="dot" style="left:44px; bottom:15px; "></div><div class="dot" style="left:46px; bottom:17px; "></div><div class="dot" style="left:48px; bottom:20px; "></div><div class="dot" style="left:50px; bottom:22px; "></div><div class="dot" style="left:52px; bottom:25px; "></div><div class="dot" style="left:54px; bottom:28px; "></div><div class="dot" style="left:56px; bottom:31px; "></div><div class="dot" style="left:58px; bottom:35px; "></div><div class="dot" style="left:60px; bottom:38px; "></div><div class="dot" style="left:62px; bottom:42px; "></div><div class="dot" style="left:64px; bottom:47px; "></div><div class="dot" style="left:66px; bottom:51px; "></div><div class="dot" style="left:68px; bottom:56px; "></div><div class="dot" style="left:70px; bottom:61px; "></div><div class="dot" style="left:72px; bottom:66px; "></div><div class="dot" style="left:74px; bottom:72px; "></div><div class="dot" style="left:76px; bottom:78px; "></div><div class="dot" style="left:78px; bottom:84px; "></div><div class="dot" style="left:80px; bottom:89px; "></div><div class="dot" style="left:82px; bottom:94px; "></div><div class="dot" style="left:84px; bottom:99px; "></div><div class="dot" style="left:86px; bottom:103px; "></div><div class="dot" style="left:88px; bottom:108px; "></div><div class="dot" style="left:90px; bottom:112px; "></div><div class="dot" style="left:92px; bottom:115px; "></div><div class="dot" style="left:94px; bottom:119px; "></div><div class="dot" style="left:96px; bottom:122px; "></div><div class="dot" style="left:98px; bottom:125px; "></div><div class="dot" style="left:100px; bottom:128px; "></div><div class="dot" style="left:102px; bottom:130px; "></div><div class="dot" style="left:104px; bottom:133px; "></div><div class="dot" style="left:106px; bottom:135px; "></div><div class="dot" style="left:108px; bottom:137px; "></div><div class="dot" style="left:110px; bottom:139px; "></div><div class="dot" style="left:112px; bottom:140px; "></div><div class="dot" style="left:114px; bottom:142px; "></div><div class="dot" style="left:116px; bottom:143px; "></div><div class="dot" style="left:118px; bottom:144px; "></div><div class="dot" style="left:120px; bottom:145px; "></div><div class="dot" style="left:122px; bottom:146px; "></div><div class="dot" style="left:124px; bottom:147px; "></div><div class="dot" style="left:126px; bottom:148px; "></div><div class="dot" style="left:128px; bottom:148px; "></div><div class="dot" style="left:130px; bottom:149px; "></div><div class="dot" style="left:132px; bottom:149px; "></div><div class="dot" style="left:134px; bottom:149px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutIn</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:6px; "></div><div class="dot" style="left:4px; bottom:11px; "></div><div class="dot" style="left:6px; bottom:17px; "></div><div class="dot" style="left:8px; bottom:22px; "></div><div class="dot" style="left:10px; bottom:26px; "></div><div class="dot" style="left:12px; bottom:31px; "></div><div class="dot" style="left:14px; bottom:35px; "></div><div class="dot" style="left:16px; bottom:38px; "></div><div class="dot" style="left:18px; bottom:42px; "></div><div class="dot" style="left:20px; bottom:45px; "></div><div class="dot" style="left:22px; bottom:49px; "></div><div class="dot" style="left:24px; bottom:51px; "></div><div class="dot" style="left:26px; bottom:54px; "></div><div class="dot" style="left:28px; bottom:57px; "></div><div class="dot" style="left:30px; bottom:59px; "></div><div class="dot" style="left:32px; bottom:61px; "></div><div class="dot" style="left:34px; bottom:63px; "></div><div class="dot" style="left:36px; bottom:64px; "></div><div class="dot" style="left:38px; bottom:66px; "></div><div class="dot" style="left:40px; bottom:67px; "></div><div class="dot" style="left:42px; bottom:69px; "></div><div class="dot" style="left:44px; bottom:70px; "></div><div class="dot" style="left:46px; bottom:71px; "></div><div class="dot" style="left:48px; bottom:72px; "></div><div class="dot" style="left:50px; bottom:72px; "></div><div class="dot" style="left:52px; bottom:73px; "></div><div class="dot" style="left:54px; bottom:73px; "></div><div class="dot" style="left:56px; bottom:74px; "></div><div class="dot" style="left:58px; bottom:74px; "></div><div class="dot" style="left:60px; bottom:74px; "></div><div class="dot" style="left:62px; bottom:75px; "></div><div class="dot" style="left:64px; bottom:75px; "></div><div class="dot" style="left:66px; bottom:75px; "></div><div class="dot" style="left:68px; bottom:75px; "></div><div class="dot" style="left:70px; bottom:75px; "></div><div class="dot" style="left:72px; bottom:75px; "></div><div class="dot" style="left:74px; bottom:75px; "></div><div class="dot" style="left:76px; bottom:75px; "></div><div class="dot" style="left:78px; bottom:75px; "></div><div class="dot" style="left:80px; bottom:75px; "></div><div class="dot" style="left:82px; bottom:75px; "></div><div class="dot" style="left:84px; bottom:75px; "></div><div class="dot" style="left:86px; bottom:75px; "></div><div class="dot" style="left:88px; bottom:75px; "></div><div class="dot" style="left:90px; bottom:76px; "></div><div class="dot" style="left:92px; bottom:76px; "></div><div class="dot" style="left:94px; bottom:76px; "></div><div class="dot" style="left:96px; bottom:77px; "></div><div class="dot" style="left:98px; bottom:77px; "></div><div class="dot" style="left:100px; bottom:78px; "></div><div class="dot" style="left:102px; bottom:78px; "></div><div class="dot" style="left:104px; bottom:79px; "></div><div class="dot" style="left:106px; bottom:80px; "></div><div class="dot" style="left:108px; bottom:81px; "></div><div class="dot" style="left:110px; bottom:83px; "></div><div class="dot" style="left:112px; bottom:84px; "></div><div class="dot" style="left:114px; bottom:86px; "></div><div class="dot" style="left:116px; bottom:87px; "></div><div class="dot" style="left:118px; bottom:89px; "></div><div class="dot" style="left:120px; bottom:91px; "></div><div class="dot" style="left:122px; bottom:93px; "></div><div class="dot" style="left:124px; bottom:96px; "></div><div class="dot" style="left:126px; bottom:99px; "></div><div class="dot" style="left:128px; bottom:101px; "></div><div class="dot" style="left:130px; bottom:105px; "></div><div class="dot" style="left:132px; bottom:108px; "></div><div class="dot" style="left:134px; bottom:112px; "></div><div class="dot" style="left:136px; bottom:115px; "></div><div class="dot" style="left:138px; bottom:119px; "></div><div class="dot" style="left:140px; bottom:124px; "></div><div class="dot" style="left:142px; bottom:128px; "></div><div class="dot" style="left:144px; bottom:133px; "></div><div class="dot" style="left:146px; bottom:139px; "></div><div class="dot" style="left:148px; bottom:144px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		
		<tr>
			<td class="name">easeInQuart</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:0px; "></div><div class="dot" style="left:18px; bottom:0px; "></div><div class="dot" style="left:20px; bottom:0px; "></div><div class="dot" style="left:22px; bottom:0px; "></div><div class="dot" style="left:24px; bottom:0px; "></div><div class="dot" style="left:26px; bottom:0px; "></div><div class="dot" style="left:28px; bottom:0px; "></div><div class="dot" style="left:30px; bottom:0px; "></div><div class="dot" style="left:32px; bottom:0px; "></div><div class="dot" style="left:34px; bottom:0px; "></div><div class="dot" style="left:36px; bottom:0px; "></div><div class="dot" style="left:38px; bottom:1px; "></div><div class="dot" style="left:40px; bottom:1px; "></div><div class="dot" style="left:42px; bottom:1px; "></div><div class="dot" style="left:44px; bottom:1px; "></div><div class="dot" style="left:46px; bottom:1px; "></div><div class="dot" style="left:48px; bottom:2px; "></div><div class="dot" style="left:50px; bottom:2px; "></div><div class="dot" style="left:52px; bottom:2px; "></div><div class="dot" style="left:54px; bottom:3px; "></div><div class="dot" style="left:56px; bottom:3px; "></div><div class="dot" style="left:58px; bottom:3px; "></div><div class="dot" style="left:60px; bottom:4px; "></div><div class="dot" style="left:62px; bottom:4px; "></div><div class="dot" style="left:64px; bottom:5px; "></div><div class="dot" style="left:66px; bottom:6px; "></div><div class="dot" style="left:68px; bottom:6px; "></div><div class="dot" style="left:70px; bottom:7px; "></div><div class="dot" style="left:72px; bottom:8px; "></div><div class="dot" style="left:74px; bottom:9px; "></div><div class="dot" style="left:76px; bottom:10px; "></div><div class="dot" style="left:78px; bottom:11px; "></div><div class="dot" style="left:80px; bottom:12px; "></div><div class="dot" style="left:82px; bottom:13px; "></div><div class="dot" style="left:84px; bottom:15px; "></div><div class="dot" style="left:86px; bottom:16px; "></div><div class="dot" style="left:88px; bottom:18px; "></div><div class="dot" style="left:90px; bottom:19px; "></div><div class="dot" style="left:92px; bottom:21px; "></div><div class="dot" style="left:94px; bottom:23px; "></div><div class="dot" style="left:96px; bottom:25px; "></div><div class="dot" style="left:98px; bottom:27px; "></div><div class="dot" style="left:100px; bottom:30px; "></div><div class="dot" style="left:102px; bottom:32px; "></div><div class="dot" style="left:104px; bottom:35px; "></div><div class="dot" style="left:106px; bottom:37px; "></div><div class="dot" style="left:108px; bottom:40px; "></div><div class="dot" style="left:110px; bottom:43px; "></div><div class="dot" style="left:112px; bottom:47px; "></div><div class="dot" style="left:114px; bottom:50px; "></div><div class="dot" style="left:116px; bottom:54px; "></div><div class="dot" style="left:118px; bottom:57px; "></div><div class="dot" style="left:120px; bottom:61px; "></div><div class="dot" style="left:122px; bottom:66px; "></div><div class="dot" style="left:124px; bottom:70px; "></div><div class="dot" style="left:126px; bottom:75px; "></div><div class="dot" style="left:128px; bottom:80px; "></div><div class="dot" style="left:130px; bottom:85px; "></div><div class="dot" style="left:132px; bottom:90px; "></div><div class="dot" style="left:134px; bottom:96px; "></div><div class="dot" style="left:136px; bottom:101px; "></div><div class="dot" style="left:138px; bottom:107px; "></div><div class="dot" style="left:140px; bottom:114px; "></div><div class="dot" style="left:142px; bottom:120px; "></div><div class="dot" style="left:144px; bottom:127px; "></div><div class="dot" style="left:146px; bottom:135px; "></div><div class="dot" style="left:148px; bottom:142px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutQuart</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:8px; "></div><div class="dot" style="left:4px; bottom:15px; "></div><div class="dot" style="left:6px; bottom:23px; "></div><div class="dot" style="left:8px; bottom:30px; "></div><div class="dot" style="left:10px; bottom:36px; "></div><div class="dot" style="left:12px; bottom:43px; "></div><div class="dot" style="left:14px; bottom:49px; "></div><div class="dot" style="left:16px; bottom:54px; "></div><div class="dot" style="left:18px; bottom:60px; "></div><div class="dot" style="left:20px; bottom:65px; "></div><div class="dot" style="left:22px; bottom:70px; "></div><div class="dot" style="left:24px; bottom:75px; "></div><div class="dot" style="left:26px; bottom:80px; "></div><div class="dot" style="left:28px; bottom:84px; "></div><div class="dot" style="left:30px; bottom:89px; "></div><div class="dot" style="left:32px; bottom:93px; "></div><div class="dot" style="left:34px; bottom:96px; "></div><div class="dot" style="left:36px; bottom:100px; "></div><div class="dot" style="left:38px; bottom:103px; "></div><div class="dot" style="left:40px; bottom:107px; "></div><div class="dot" style="left:42px; bottom:110px; "></div><div class="dot" style="left:44px; bottom:113px; "></div><div class="dot" style="left:46px; bottom:115px; "></div><div class="dot" style="left:48px; bottom:118px; "></div><div class="dot" style="left:50px; bottom:120px; "></div><div class="dot" style="left:52px; bottom:123px; "></div><div class="dot" style="left:54px; bottom:125px; "></div><div class="dot" style="left:56px; bottom:127px; "></div><div class="dot" style="left:58px; bottom:129px; "></div><div class="dot" style="left:60px; bottom:131px; "></div><div class="dot" style="left:62px; bottom:132px; "></div><div class="dot" style="left:64px; bottom:134px; "></div><div class="dot" style="left:66px; bottom:135px; "></div><div class="dot" style="left:68px; bottom:137px; "></div><div class="dot" style="left:70px; bottom:138px; "></div><div class="dot" style="left:72px; bottom:139px; "></div><div class="dot" style="left:74px; bottom:140px; "></div><div class="dot" style="left:76px; bottom:141px; "></div><div class="dot" style="left:78px; bottom:142px; "></div><div class="dot" style="left:80px; bottom:143px; "></div><div class="dot" style="left:82px; bottom:144px; "></div><div class="dot" style="left:84px; bottom:144px; "></div><div class="dot" style="left:86px; bottom:145px; "></div><div class="dot" style="left:88px; bottom:146px; "></div><div class="dot" style="left:90px; bottom:146px; "></div><div class="dot" style="left:92px; bottom:147px; "></div><div class="dot" style="left:94px; bottom:147px; "></div><div class="dot" style="left:96px; bottom:147px; "></div><div class="dot" style="left:98px; bottom:148px; "></div><div class="dot" style="left:100px; bottom:148px; "></div><div class="dot" style="left:102px; bottom:148px; "></div><div class="dot" style="left:104px; bottom:149px; "></div><div class="dot" style="left:106px; bottom:149px; "></div><div class="dot" style="left:108px; bottom:149px; "></div><div class="dot" style="left:110px; bottom:149px; "></div><div class="dot" style="left:112px; bottom:149px; "></div><div class="dot" style="left:114px; bottom:150px; "></div><div class="dot" style="left:116px; bottom:150px; "></div><div class="dot" style="left:118px; bottom:150px; "></div><div class="dot" style="left:120px; bottom:150px; "></div><div class="dot" style="left:122px; bottom:150px; "></div><div class="dot" style="left:124px; bottom:150px; "></div><div class="dot" style="left:126px; bottom:150px; "></div><div class="dot" style="left:128px; bottom:150px; "></div><div class="dot" style="left:130px; bottom:150px; "></div><div class="dot" style="left:132px; bottom:150px; "></div><div class="dot" style="left:134px; bottom:150px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInOutQuart</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:0px; "></div><div class="dot" style="left:18px; bottom:0px; "></div><div class="dot" style="left:20px; bottom:0px; "></div><div class="dot" style="left:22px; bottom:1px; "></div><div class="dot" style="left:24px; bottom:1px; "></div><div class="dot" style="left:26px; bottom:1px; "></div><div class="dot" style="left:28px; bottom:1px; "></div><div class="dot" style="left:30px; bottom:2px; "></div><div class="dot" style="left:32px; bottom:2px; "></div><div class="dot" style="left:34px; bottom:3px; "></div><div class="dot" style="left:36px; bottom:4px; "></div><div class="dot" style="left:38px; bottom:5px; "></div><div class="dot" style="left:40px; bottom:6px; "></div><div class="dot" style="left:42px; bottom:7px; "></div><div class="dot" style="left:44px; bottom:9px; "></div><div class="dot" style="left:46px; bottom:11px; "></div><div class="dot" style="left:48px; bottom:13px; "></div><div class="dot" style="left:50px; bottom:15px; "></div><div class="dot" style="left:52px; bottom:17px; "></div><div class="dot" style="left:54px; bottom:20px; "></div><div class="dot" style="left:56px; bottom:23px; "></div><div class="dot" style="left:58px; bottom:27px; "></div><div class="dot" style="left:60px; bottom:31px; "></div><div class="dot" style="left:62px; bottom:35px; "></div><div class="dot" style="left:64px; bottom:40px; "></div><div class="dot" style="left:66px; bottom:45px; "></div><div class="dot" style="left:68px; bottom:51px; "></div><div class="dot" style="left:70px; bottom:57px; "></div><div class="dot" style="left:72px; bottom:64px; "></div><div class="dot" style="left:74px; bottom:71px; "></div><div class="dot" style="left:76px; bottom:79px; "></div><div class="dot" style="left:78px; bottom:86px; "></div><div class="dot" style="left:80px; bottom:93px; "></div><div class="dot" style="left:82px; bottom:99px; "></div><div class="dot" style="left:84px; bottom:105px; "></div><div class="dot" style="left:86px; bottom:110px; "></div><div class="dot" style="left:88px; bottom:115px; "></div><div class="dot" style="left:90px; bottom:119px; "></div><div class="dot" style="left:92px; bottom:123px; "></div><div class="dot" style="left:94px; bottom:127px; "></div><div class="dot" style="left:96px; bottom:130px; "></div><div class="dot" style="left:98px; bottom:133px; "></div><div class="dot" style="left:100px; bottom:135px; "></div><div class="dot" style="left:102px; bottom:137px; "></div><div class="dot" style="left:104px; bottom:139px; "></div><div class="dot" style="left:106px; bottom:141px; "></div><div class="dot" style="left:108px; bottom:143px; "></div><div class="dot" style="left:110px; bottom:144px; "></div><div class="dot" style="left:112px; bottom:145px; "></div><div class="dot" style="left:114px; bottom:146px; "></div><div class="dot" style="left:116px; bottom:147px; "></div><div class="dot" style="left:118px; bottom:148px; "></div><div class="dot" style="left:120px; bottom:148px; "></div><div class="dot" style="left:122px; bottom:149px; "></div><div class="dot" style="left:124px; bottom:149px; "></div><div class="dot" style="left:126px; bottom:149px; "></div><div class="dot" style="left:128px; bottom:149px; "></div><div class="dot" style="left:130px; bottom:150px; "></div><div class="dot" style="left:132px; bottom:150px; "></div><div class="dot" style="left:134px; bottom:150px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutInQuart</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:8px; "></div><div class="dot" style="left:4px; bottom:15px; "></div><div class="dot" style="left:6px; bottom:21px; "></div><div class="dot" style="left:8px; bottom:27px; "></div><div class="dot" style="left:10px; bottom:33px; "></div><div class="dot" style="left:12px; bottom:38px; "></div><div class="dot" style="left:14px; bottom:42px; "></div><div class="dot" style="left:16px; bottom:46px; "></div><div class="dot" style="left:18px; bottom:50px; "></div><div class="dot" style="left:20px; bottom:53px; "></div><div class="dot" style="left:22px; bottom:56px; "></div><div class="dot" style="left:24px; bottom:59px; "></div><div class="dot" style="left:26px; bottom:61px; "></div><div class="dot" style="left:28px; bottom:63px; "></div><div class="dot" style="left:30px; bottom:65px; "></div><div class="dot" style="left:32px; bottom:67px; "></div><div class="dot" style="left:34px; bottom:68px; "></div><div class="dot" style="left:36px; bottom:70px; "></div><div class="dot" style="left:38px; bottom:71px; "></div><div class="dot" style="left:40px; bottom:71px; "></div><div class="dot" style="left:42px; bottom:72px; "></div><div class="dot" style="left:44px; bottom:73px; "></div><div class="dot" style="left:46px; bottom:73px; "></div><div class="dot" style="left:48px; bottom:74px; "></div><div class="dot" style="left:50px; bottom:74px; "></div><div class="dot" style="left:52px; bottom:74px; "></div><div class="dot" style="left:54px; bottom:75px; "></div><div class="dot" style="left:56px; bottom:75px; "></div><div class="dot" style="left:58px; bottom:75px; "></div><div class="dot" style="left:60px; bottom:75px; "></div><div class="dot" style="left:62px; bottom:75px; "></div><div class="dot" style="left:64px; bottom:75px; "></div><div class="dot" style="left:66px; bottom:75px; "></div><div class="dot" style="left:68px; bottom:75px; "></div><div class="dot" style="left:70px; bottom:75px; "></div><div class="dot" style="left:72px; bottom:75px; "></div><div class="dot" style="left:74px; bottom:75px; "></div><div class="dot" style="left:76px; bottom:75px; "></div><div class="dot" style="left:78px; bottom:75px; "></div><div class="dot" style="left:80px; bottom:75px; "></div><div class="dot" style="left:82px; bottom:75px; "></div><div class="dot" style="left:84px; bottom:75px; "></div><div class="dot" style="left:86px; bottom:75px; "></div><div class="dot" style="left:88px; bottom:75px; "></div><div class="dot" style="left:90px; bottom:75px; "></div><div class="dot" style="left:92px; bottom:75px; "></div><div class="dot" style="left:94px; bottom:75px; "></div><div class="dot" style="left:96px; bottom:75px; "></div><div class="dot" style="left:98px; bottom:76px; "></div><div class="dot" style="left:100px; bottom:76px; "></div><div class="dot" style="left:102px; bottom:76px; "></div><div class="dot" style="left:104px; bottom:77px; "></div><div class="dot" style="left:106px; bottom:77px; "></div><div class="dot" style="left:108px; bottom:78px; "></div><div class="dot" style="left:110px; bottom:79px; "></div><div class="dot" style="left:112px; bottom:79px; "></div><div class="dot" style="left:114px; bottom:80px; "></div><div class="dot" style="left:116px; bottom:82px; "></div><div class="dot" style="left:118px; bottom:83px; "></div><div class="dot" style="left:120px; bottom:85px; "></div><div class="dot" style="left:122px; bottom:87px; "></div><div class="dot" style="left:124px; bottom:89px; "></div><div class="dot" style="left:126px; bottom:91px; "></div><div class="dot" style="left:128px; bottom:94px; "></div><div class="dot" style="left:130px; bottom:97px; "></div><div class="dot" style="left:132px; bottom:100px; "></div><div class="dot" style="left:134px; bottom:104px; "></div><div class="dot" style="left:136px; bottom:108px; "></div><div class="dot" style="left:138px; bottom:112px; "></div><div class="dot" style="left:140px; bottom:117px; "></div><div class="dot" style="left:142px; bottom:123px; "></div><div class="dot" style="left:144px; bottom:129px; "></div><div class="dot" style="left:146px; bottom:135px; "></div><div class="dot" style="left:148px; bottom:142px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInQuint</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:0px; "></div><div class="dot" style="left:18px; bottom:0px; "></div><div class="dot" style="left:20px; bottom:0px; "></div><div class="dot" style="left:22px; bottom:0px; "></div><div class="dot" style="left:24px; bottom:0px; "></div><div class="dot" style="left:26px; bottom:0px; "></div><div class="dot" style="left:28px; bottom:0px; "></div><div class="dot" style="left:30px; bottom:0px; "></div><div class="dot" style="left:32px; bottom:0px; "></div><div class="dot" style="left:34px; bottom:0px; "></div><div class="dot" style="left:36px; bottom:0px; "></div><div class="dot" style="left:38px; bottom:0px; "></div><div class="dot" style="left:40px; bottom:0px; "></div><div class="dot" style="left:42px; bottom:0px; "></div><div class="dot" style="left:44px; bottom:0px; "></div><div class="dot" style="left:46px; bottom:0px; "></div><div class="dot" style="left:48px; bottom:1px; "></div><div class="dot" style="left:50px; bottom:1px; "></div><div class="dot" style="left:52px; bottom:1px; "></div><div class="dot" style="left:54px; bottom:1px; "></div><div class="dot" style="left:56px; bottom:1px; "></div><div class="dot" style="left:58px; bottom:1px; "></div><div class="dot" style="left:60px; bottom:2px; "></div><div class="dot" style="left:62px; bottom:2px; "></div><div class="dot" style="left:64px; bottom:2px; "></div><div class="dot" style="left:66px; bottom:2px; "></div><div class="dot" style="left:68px; bottom:3px; "></div><div class="dot" style="left:70px; bottom:3px; "></div><div class="dot" style="left:72px; bottom:4px; "></div><div class="dot" style="left:74px; bottom:4px; "></div><div class="dot" style="left:76px; bottom:5px; "></div><div class="dot" style="left:78px; bottom:6px; "></div><div class="dot" style="left:80px; bottom:6px; "></div><div class="dot" style="left:82px; bottom:7px; "></div><div class="dot" style="left:84px; bottom:8px; "></div><div class="dot" style="left:86px; bottom:9px; "></div><div class="dot" style="left:88px; bottom:10px; "></div><div class="dot" style="left:90px; bottom:12px; "></div><div class="dot" style="left:92px; bottom:13px; "></div><div class="dot" style="left:94px; bottom:14px; "></div><div class="dot" style="left:96px; bottom:16px; "></div><div class="dot" style="left:98px; bottom:18px; "></div><div class="dot" style="left:100px; bottom:20px; "></div><div class="dot" style="left:102px; bottom:22px; "></div><div class="dot" style="left:104px; bottom:24px; "></div><div class="dot" style="left:106px; bottom:26px; "></div><div class="dot" style="left:108px; bottom:29px; "></div><div class="dot" style="left:110px; bottom:32px; "></div><div class="dot" style="left:112px; bottom:35px; "></div><div class="dot" style="left:114px; bottom:38px; "></div><div class="dot" style="left:116px; bottom:41px; "></div><div class="dot" style="left:118px; bottom:45px; "></div><div class="dot" style="left:120px; bottom:49px; "></div><div class="dot" style="left:122px; bottom:53px; "></div><div class="dot" style="left:124px; bottom:58px; "></div><div class="dot" style="left:126px; bottom:63px; "></div><div class="dot" style="left:128px; bottom:68px; "></div><div class="dot" style="left:130px; bottom:73px; "></div><div class="dot" style="left:132px; bottom:79px; "></div><div class="dot" style="left:134px; bottom:85px; "></div><div class="dot" style="left:136px; bottom:92px; "></div><div class="dot" style="left:138px; bottom:99px; "></div><div class="dot" style="left:140px; bottom:106px; "></div><div class="dot" style="left:142px; bottom:114px; "></div><div class="dot" style="left:144px; bottom:122px; "></div><div class="dot" style="left:146px; bottom:131px; "></div><div class="dot" style="left:148px; bottom:140px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutQuint</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:10px; "></div><div class="dot" style="left:4px; bottom:19px; "></div><div class="dot" style="left:6px; bottom:28px; "></div><div class="dot" style="left:8px; bottom:36px; "></div><div class="dot" style="left:10px; bottom:44px; "></div><div class="dot" style="left:12px; bottom:51px; "></div><div class="dot" style="left:14px; bottom:58px; "></div><div class="dot" style="left:16px; bottom:65px; "></div><div class="dot" style="left:18px; bottom:71px; "></div><div class="dot" style="left:20px; bottom:77px; "></div><div class="dot" style="left:22px; bottom:82px; "></div><div class="dot" style="left:24px; bottom:87px; "></div><div class="dot" style="left:26px; bottom:92px; "></div><div class="dot" style="left:28px; bottom:97px; "></div><div class="dot" style="left:30px; bottom:101px; "></div><div class="dot" style="left:32px; bottom:105px; "></div><div class="dot" style="left:34px; bottom:109px; "></div><div class="dot" style="left:36px; bottom:112px; "></div><div class="dot" style="left:38px; bottom:115px; "></div><div class="dot" style="left:40px; bottom:118px; "></div><div class="dot" style="left:42px; bottom:121px; "></div><div class="dot" style="left:44px; bottom:124px; "></div><div class="dot" style="left:46px; bottom:126px; "></div><div class="dot" style="left:48px; bottom:128px; "></div><div class="dot" style="left:50px; bottom:130px; "></div><div class="dot" style="left:52px; bottom:132px; "></div><div class="dot" style="left:54px; bottom:134px; "></div><div class="dot" style="left:56px; bottom:136px; "></div><div class="dot" style="left:58px; bottom:137px; "></div><div class="dot" style="left:60px; bottom:138px; "></div><div class="dot" style="left:62px; bottom:140px; "></div><div class="dot" style="left:64px; bottom:141px; "></div><div class="dot" style="left:66px; bottom:142px; "></div><div class="dot" style="left:68px; bottom:143px; "></div><div class="dot" style="left:70px; bottom:144px; "></div><div class="dot" style="left:72px; bottom:144px; "></div><div class="dot" style="left:74px; bottom:145px; "></div><div class="dot" style="left:76px; bottom:146px; "></div><div class="dot" style="left:78px; bottom:146px; "></div><div class="dot" style="left:80px; bottom:147px; "></div><div class="dot" style="left:82px; bottom:147px; "></div><div class="dot" style="left:84px; bottom:148px; "></div><div class="dot" style="left:86px; bottom:148px; "></div><div class="dot" style="left:88px; bottom:148px; "></div><div class="dot" style="left:90px; bottom:148px; "></div><div class="dot" style="left:92px; bottom:149px; "></div><div class="dot" style="left:94px; bottom:149px; "></div><div class="dot" style="left:96px; bottom:149px; "></div><div class="dot" style="left:98px; bottom:149px; "></div><div class="dot" style="left:100px; bottom:149px; "></div><div class="dot" style="left:102px; bottom:149px; "></div><div class="dot" style="left:104px; bottom:150px; "></div><div class="dot" style="left:106px; bottom:150px; "></div><div class="dot" style="left:108px; bottom:150px; "></div><div class="dot" style="left:110px; bottom:150px; "></div><div class="dot" style="left:112px; bottom:150px; "></div><div class="dot" style="left:114px; bottom:150px; "></div><div class="dot" style="left:116px; bottom:150px; "></div><div class="dot" style="left:118px; bottom:150px; "></div><div class="dot" style="left:120px; bottom:150px; "></div><div class="dot" style="left:122px; bottom:150px; "></div><div class="dot" style="left:124px; bottom:150px; "></div><div class="dot" style="left:126px; bottom:150px; "></div><div class="dot" style="left:128px; bottom:150px; "></div><div class="dot" style="left:130px; bottom:150px; "></div><div class="dot" style="left:132px; bottom:150px; "></div><div class="dot" style="left:134px; bottom:150px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInOutQuint</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:0px; "></div><div class="dot" style="left:18px; bottom:0px; "></div><div class="dot" style="left:20px; bottom:0px; "></div><div class="dot" style="left:22px; bottom:0px; "></div><div class="dot" style="left:24px; bottom:0px; "></div><div class="dot" style="left:26px; bottom:0px; "></div><div class="dot" style="left:28px; bottom:1px; "></div><div class="dot" style="left:30px; bottom:1px; "></div><div class="dot" style="left:32px; bottom:1px; "></div><div class="dot" style="left:34px; bottom:1px; "></div><div class="dot" style="left:36px; bottom:2px; "></div><div class="dot" style="left:38px; bottom:3px; "></div><div class="dot" style="left:40px; bottom:3px; "></div><div class="dot" style="left:42px; bottom:4px; "></div><div class="dot" style="left:44px; bottom:5px; "></div><div class="dot" style="left:46px; bottom:7px; "></div><div class="dot" style="left:48px; bottom:8px; "></div><div class="dot" style="left:50px; bottom:10px; "></div><div class="dot" style="left:52px; bottom:12px; "></div><div class="dot" style="left:54px; bottom:15px; "></div><div class="dot" style="left:56px; bottom:17px; "></div><div class="dot" style="left:58px; bottom:21px; "></div><div class="dot" style="left:60px; bottom:25px; "></div><div class="dot" style="left:62px; bottom:29px; "></div><div class="dot" style="left:64px; bottom:34px; "></div><div class="dot" style="left:66px; bottom:40px; "></div><div class="dot" style="left:68px; bottom:46px; "></div><div class="dot" style="left:70px; bottom:53px; "></div><div class="dot" style="left:72px; bottom:61px; "></div><div class="dot" style="left:74px; bottom:70px; "></div><div class="dot" style="left:76px; bottom:80px; "></div><div class="dot" style="left:78px; bottom:89px; "></div><div class="dot" style="left:80px; bottom:97px; "></div><div class="dot" style="left:82px; bottom:104px; "></div><div class="dot" style="left:84px; bottom:110px; "></div><div class="dot" style="left:86px; bottom:116px; "></div><div class="dot" style="left:88px; bottom:121px; "></div><div class="dot" style="left:90px; bottom:125px; "></div><div class="dot" style="left:92px; bottom:129px; "></div><div class="dot" style="left:94px; bottom:133px; "></div><div class="dot" style="left:96px; bottom:135px; "></div><div class="dot" style="left:98px; bottom:138px; "></div><div class="dot" style="left:100px; bottom:140px; "></div><div class="dot" style="left:102px; bottom:142px; "></div><div class="dot" style="left:104px; bottom:143px; "></div><div class="dot" style="left:106px; bottom:145px; "></div><div class="dot" style="left:108px; bottom:146px; "></div><div class="dot" style="left:110px; bottom:147px; "></div><div class="dot" style="left:112px; bottom:147px; "></div><div class="dot" style="left:114px; bottom:148px; "></div><div class="dot" style="left:116px; bottom:149px; "></div><div class="dot" style="left:118px; bottom:149px; "></div><div class="dot" style="left:120px; bottom:149px; "></div><div class="dot" style="left:122px; bottom:149px; "></div><div class="dot" style="left:124px; bottom:150px; "></div><div class="dot" style="left:126px; bottom:150px; "></div><div class="dot" style="left:128px; bottom:150px; "></div><div class="dot" style="left:130px; bottom:150px; "></div><div class="dot" style="left:132px; bottom:150px; "></div><div class="dot" style="left:134px; bottom:150px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutInQuint</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:9px; "></div><div class="dot" style="left:4px; bottom:18px; "></div><div class="dot" style="left:6px; bottom:26px; "></div><div class="dot" style="left:8px; bottom:32px; "></div><div class="dot" style="left:10px; bottom:38px; "></div><div class="dot" style="left:12px; bottom:44px; "></div><div class="dot" style="left:14px; bottom:48px; "></div><div class="dot" style="left:16px; bottom:52px; "></div><div class="dot" style="left:18px; bottom:56px; "></div><div class="dot" style="left:20px; bottom:59px; "></div><div class="dot" style="left:22px; bottom:62px; "></div><div class="dot" style="left:24px; bottom:64px; "></div><div class="dot" style="left:26px; bottom:66px; "></div><div class="dot" style="left:28px; bottom:68px; "></div><div class="dot" style="left:30px; bottom:69px; "></div><div class="dot" style="left:32px; bottom:70px; "></div><div class="dot" style="left:34px; bottom:71px; "></div><div class="dot" style="left:36px; bottom:72px; "></div><div class="dot" style="left:38px; bottom:73px; "></div><div class="dot" style="left:40px; bottom:73px; "></div><div class="dot" style="left:42px; bottom:74px; "></div><div class="dot" style="left:44px; bottom:74px; "></div><div class="dot" style="left:46px; bottom:74px; "></div><div class="dot" style="left:48px; bottom:75px; "></div><div class="dot" style="left:50px; bottom:75px; "></div><div class="dot" style="left:52px; bottom:75px; "></div><div class="dot" style="left:54px; bottom:75px; "></div><div class="dot" style="left:56px; bottom:75px; "></div><div class="dot" style="left:58px; bottom:75px; "></div><div class="dot" style="left:60px; bottom:75px; "></div><div class="dot" style="left:62px; bottom:75px; "></div><div class="dot" style="left:64px; bottom:75px; "></div><div class="dot" style="left:66px; bottom:75px; "></div><div class="dot" style="left:68px; bottom:75px; "></div><div class="dot" style="left:70px; bottom:75px; "></div><div class="dot" style="left:72px; bottom:75px; "></div><div class="dot" style="left:74px; bottom:75px; "></div><div class="dot" style="left:76px; bottom:75px; "></div><div class="dot" style="left:78px; bottom:75px; "></div><div class="dot" style="left:80px; bottom:75px; "></div><div class="dot" style="left:82px; bottom:75px; "></div><div class="dot" style="left:84px; bottom:75px; "></div><div class="dot" style="left:86px; bottom:75px; "></div><div class="dot" style="left:88px; bottom:75px; "></div><div class="dot" style="left:90px; bottom:75px; "></div><div class="dot" style="left:92px; bottom:75px; "></div><div class="dot" style="left:94px; bottom:75px; "></div><div class="dot" style="left:96px; bottom:75px; "></div><div class="dot" style="left:98px; bottom:75px; "></div><div class="dot" style="left:100px; bottom:75px; "></div><div class="dot" style="left:102px; bottom:75px; "></div><div class="dot" style="left:104px; bottom:76px; "></div><div class="dot" style="left:106px; bottom:76px; "></div><div class="dot" style="left:108px; bottom:76px; "></div><div class="dot" style="left:110px; bottom:77px; "></div><div class="dot" style="left:112px; bottom:77px; "></div><div class="dot" style="left:114px; bottom:78px; "></div><div class="dot" style="left:116px; bottom:79px; "></div><div class="dot" style="left:118px; bottom:80px; "></div><div class="dot" style="left:120px; bottom:81px; "></div><div class="dot" style="left:122px; bottom:82px; "></div><div class="dot" style="left:124px; bottom:84px; "></div><div class="dot" style="left:126px; bottom:86px; "></div><div class="dot" style="left:128px; bottom:88px; "></div><div class="dot" style="left:130px; bottom:91px; "></div><div class="dot" style="left:132px; bottom:94px; "></div><div class="dot" style="left:134px; bottom:98px; "></div><div class="dot" style="left:136px; bottom:102px; "></div><div class="dot" style="left:138px; bottom:106px; "></div><div class="dot" style="left:140px; bottom:112px; "></div><div class="dot" style="left:142px; bottom:118px; "></div><div class="dot" style="left:144px; bottom:124px; "></div><div class="dot" style="left:146px; bottom:132px; "></div><div class="dot" style="left:148px; bottom:141px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInExpo</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:0px; "></div><div class="dot" style="left:18px; bottom:0px; "></div><div class="dot" style="left:20px; bottom:0px; "></div><div class="dot" style="left:22px; bottom:0px; "></div><div class="dot" style="left:24px; bottom:0px; "></div><div class="dot" style="left:26px; bottom:0px; "></div><div class="dot" style="left:28px; bottom:1px; "></div><div class="dot" style="left:30px; bottom:1px; "></div><div class="dot" style="left:32px; bottom:1px; "></div><div class="dot" style="left:34px; bottom:1px; "></div><div class="dot" style="left:36px; bottom:1px; "></div><div class="dot" style="left:38px; bottom:1px; "></div><div class="dot" style="left:40px; bottom:1px; "></div><div class="dot" style="left:42px; bottom:1px; "></div><div class="dot" style="left:44px; bottom:1px; "></div><div class="dot" style="left:46px; bottom:1px; "></div><div class="dot" style="left:48px; bottom:1px; "></div><div class="dot" style="left:50px; bottom:1px; "></div><div class="dot" style="left:52px; bottom:2px; "></div><div class="dot" style="left:54px; bottom:2px; "></div><div class="dot" style="left:56px; bottom:2px; "></div><div class="dot" style="left:58px; bottom:2px; "></div><div class="dot" style="left:60px; bottom:2px; "></div><div class="dot" style="left:62px; bottom:3px; "></div><div class="dot" style="left:64px; bottom:3px; "></div><div class="dot" style="left:66px; bottom:3px; "></div><div class="dot" style="left:68px; bottom:3px; "></div><div class="dot" style="left:70px; bottom:4px; "></div><div class="dot" style="left:72px; bottom:4px; "></div><div class="dot" style="left:74px; bottom:4px; "></div><div class="dot" style="left:76px; bottom:5px; "></div><div class="dot" style="left:78px; bottom:5px; "></div><div class="dot" style="left:80px; bottom:6px; "></div><div class="dot" style="left:82px; bottom:6px; "></div><div class="dot" style="left:84px; bottom:7px; "></div><div class="dot" style="left:86px; bottom:8px; "></div><div class="dot" style="left:88px; bottom:9px; "></div><div class="dot" style="left:90px; bottom:9px; "></div><div class="dot" style="left:92px; bottom:10px; "></div><div class="dot" style="left:94px; bottom:11px; "></div><div class="dot" style="left:96px; bottom:12px; "></div><div class="dot" style="left:98px; bottom:14px; "></div><div class="dot" style="left:100px; bottom:15px; "></div><div class="dot" style="left:102px; bottom:16px; "></div><div class="dot" style="left:104px; bottom:18px; "></div><div class="dot" style="left:106px; bottom:20px; "></div><div class="dot" style="left:108px; bottom:22px; "></div><div class="dot" style="left:110px; bottom:24px; "></div><div class="dot" style="left:112px; bottom:26px; "></div><div class="dot" style="left:114px; bottom:28px; "></div><div class="dot" style="left:116px; bottom:31px; "></div><div class="dot" style="left:118px; bottom:34px; "></div><div class="dot" style="left:120px; bottom:38px; "></div><div class="dot" style="left:122px; bottom:41px; "></div><div class="dot" style="left:124px; bottom:45px; "></div><div class="dot" style="left:126px; bottom:49px; "></div><div class="dot" style="left:128px; bottom:54px; "></div><div class="dot" style="left:130px; bottom:60px; "></div><div class="dot" style="left:132px; bottom:65px; "></div><div class="dot" style="left:134px; bottom:72px; "></div><div class="dot" style="left:136px; bottom:79px; "></div><div class="dot" style="left:138px; bottom:86px; "></div><div class="dot" style="left:140px; bottom:94px; "></div><div class="dot" style="left:142px; bottom:104px; "></div><div class="dot" style="left:144px; bottom:114px; "></div><div class="dot" style="left:146px; bottom:125px; "></div><div class="dot" style="left:148px; bottom:137px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutExpo</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:13px; "></div><div class="dot" style="left:4px; bottom:25px; "></div><div class="dot" style="left:6px; bottom:36px; "></div><div class="dot" style="left:8px; bottom:46px; "></div><div class="dot" style="left:10px; bottom:56px; "></div><div class="dot" style="left:12px; bottom:64px; "></div><div class="dot" style="left:14px; bottom:71px; "></div><div class="dot" style="left:16px; bottom:78px; "></div><div class="dot" style="left:18px; bottom:85px; "></div><div class="dot" style="left:20px; bottom:90px; "></div><div class="dot" style="left:22px; bottom:96px; "></div><div class="dot" style="left:24px; bottom:101px; "></div><div class="dot" style="left:26px; bottom:105px; "></div><div class="dot" style="left:28px; bottom:109px; "></div><div class="dot" style="left:30px; bottom:113px; "></div><div class="dot" style="left:32px; bottom:116px; "></div><div class="dot" style="left:34px; bottom:119px; "></div><div class="dot" style="left:36px; bottom:122px; "></div><div class="dot" style="left:38px; bottom:124px; "></div><div class="dot" style="left:40px; bottom:126px; "></div><div class="dot" style="left:42px; bottom:128px; "></div><div class="dot" style="left:44px; bottom:130px; "></div><div class="dot" style="left:46px; bottom:132px; "></div><div class="dot" style="left:48px; bottom:134px; "></div><div class="dot" style="left:50px; bottom:135px; "></div><div class="dot" style="left:52px; bottom:136px; "></div><div class="dot" style="left:54px; bottom:138px; "></div><div class="dot" style="left:56px; bottom:139px; "></div><div class="dot" style="left:58px; bottom:140px; "></div><div class="dot" style="left:60px; bottom:141px; "></div><div class="dot" style="left:62px; bottom:141px; "></div><div class="dot" style="left:64px; bottom:142px; "></div><div class="dot" style="left:66px; bottom:143px; "></div><div class="dot" style="left:68px; bottom:144px; "></div><div class="dot" style="left:70px; bottom:144px; "></div><div class="dot" style="left:72px; bottom:145px; "></div><div class="dot" style="left:74px; bottom:145px; "></div><div class="dot" style="left:76px; bottom:146px; "></div><div class="dot" style="left:78px; bottom:146px; "></div><div class="dot" style="left:80px; bottom:146px; "></div><div class="dot" style="left:82px; bottom:147px; "></div><div class="dot" style="left:84px; bottom:147px; "></div><div class="dot" style="left:86px; bottom:147px; "></div><div class="dot" style="left:88px; bottom:147px; "></div><div class="dot" style="left:90px; bottom:148px; "></div><div class="dot" style="left:92px; bottom:148px; "></div><div class="dot" style="left:94px; bottom:148px; "></div><div class="dot" style="left:96px; bottom:148px; "></div><div class="dot" style="left:98px; bottom:148px; "></div><div class="dot" style="left:100px; bottom:149px; "></div><div class="dot" style="left:102px; bottom:149px; "></div><div class="dot" style="left:104px; bottom:149px; "></div><div class="dot" style="left:106px; bottom:149px; "></div><div class="dot" style="left:108px; bottom:149px; "></div><div class="dot" style="left:110px; bottom:149px; "></div><div class="dot" style="left:112px; bottom:149px; "></div><div class="dot" style="left:114px; bottom:149px; "></div><div class="dot" style="left:116px; bottom:149px; "></div><div class="dot" style="left:118px; bottom:149px; "></div><div class="dot" style="left:120px; bottom:149px; "></div><div class="dot" style="left:122px; bottom:149px; "></div><div class="dot" style="left:124px; bottom:150px; "></div><div class="dot" style="left:126px; bottom:150px; "></div><div class="dot" style="left:128px; bottom:150px; "></div><div class="dot" style="left:130px; bottom:150px; "></div><div class="dot" style="left:132px; bottom:150px; "></div><div class="dot" style="left:134px; bottom:150px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInOutExpo</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:0px; "></div><div class="dot" style="left:18px; bottom:0px; "></div><div class="dot" style="left:20px; bottom:0px; "></div><div class="dot" style="left:22px; bottom:1px; "></div><div class="dot" style="left:24px; bottom:1px; "></div><div class="dot" style="left:26px; bottom:1px; "></div><div class="dot" style="left:28px; bottom:1px; "></div><div class="dot" style="left:30px; bottom:1px; "></div><div class="dot" style="left:32px; bottom:1px; "></div><div class="dot" style="left:34px; bottom:2px; "></div><div class="dot" style="left:36px; bottom:2px; "></div><div class="dot" style="left:38px; bottom:2px; "></div><div class="dot" style="left:40px; bottom:3px; "></div><div class="dot" style="left:42px; bottom:4px; "></div><div class="dot" style="left:44px; bottom:4px; "></div><div class="dot" style="left:46px; bottom:5px; "></div><div class="dot" style="left:48px; bottom:6px; "></div><div class="dot" style="left:50px; bottom:7px; "></div><div class="dot" style="left:52px; bottom:9px; "></div><div class="dot" style="left:54px; bottom:11px; "></div><div class="dot" style="left:56px; bottom:13px; "></div><div class="dot" style="left:58px; bottom:16px; "></div><div class="dot" style="left:60px; bottom:19px; "></div><div class="dot" style="left:62px; bottom:23px; "></div><div class="dot" style="left:64px; bottom:27px; "></div><div class="dot" style="left:66px; bottom:33px; "></div><div class="dot" style="left:68px; bottom:39px; "></div><div class="dot" style="left:70px; bottom:47px; "></div><div class="dot" style="left:72px; bottom:57px; "></div><div class="dot" style="left:74px; bottom:68px; "></div><div class="dot" style="left:76px; bottom:82px; "></div><div class="dot" style="left:78px; bottom:93px; "></div><div class="dot" style="left:80px; bottom:103px; "></div><div class="dot" style="left:82px; bottom:111px; "></div><div class="dot" style="left:84px; bottom:117px; "></div><div class="dot" style="left:86px; bottom:123px; "></div><div class="dot" style="left:88px; bottom:127px; "></div><div class="dot" style="left:90px; bottom:131px; "></div><div class="dot" style="left:92px; bottom:134px; "></div><div class="dot" style="left:94px; bottom:137px; "></div><div class="dot" style="left:96px; bottom:139px; "></div><div class="dot" style="left:98px; bottom:141px; "></div><div class="dot" style="left:100px; bottom:143px; "></div><div class="dot" style="left:102px; bottom:144px; "></div><div class="dot" style="left:104px; bottom:145px; "></div><div class="dot" style="left:106px; bottom:146px; "></div><div class="dot" style="left:108px; bottom:146px; "></div><div class="dot" style="left:110px; bottom:147px; "></div><div class="dot" style="left:112px; bottom:148px; "></div><div class="dot" style="left:114px; bottom:148px; "></div><div class="dot" style="left:116px; bottom:148px; "></div><div class="dot" style="left:118px; bottom:149px; "></div><div class="dot" style="left:120px; bottom:149px; "></div><div class="dot" style="left:122px; bottom:149px; "></div><div class="dot" style="left:124px; bottom:149px; "></div><div class="dot" style="left:126px; bottom:149px; "></div><div class="dot" style="left:128px; bottom:149px; "></div><div class="dot" style="left:130px; bottom:150px; "></div><div class="dot" style="left:132px; bottom:150px; "></div><div class="dot" style="left:134px; bottom:150px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutInExpo</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:13px; "></div><div class="dot" style="left:4px; bottom:23px; "></div><div class="dot" style="left:6px; bottom:32px; "></div><div class="dot" style="left:8px; bottom:39px; "></div><div class="dot" style="left:10px; bottom:45px; "></div><div class="dot" style="left:12px; bottom:50px; "></div><div class="dot" style="left:14px; bottom:54px; "></div><div class="dot" style="left:16px; bottom:58px; "></div><div class="dot" style="left:18px; bottom:61px; "></div><div class="dot" style="left:20px; bottom:63px; "></div><div class="dot" style="left:22px; bottom:65px; "></div><div class="dot" style="left:24px; bottom:67px; "></div><div class="dot" style="left:26px; bottom:68px; "></div><div class="dot" style="left:28px; bottom:69px; "></div><div class="dot" style="left:30px; bottom:70px; "></div><div class="dot" style="left:32px; bottom:71px; "></div><div class="dot" style="left:34px; bottom:72px; "></div><div class="dot" style="left:36px; bottom:72px; "></div><div class="dot" style="left:38px; bottom:73px; "></div><div class="dot" style="left:40px; bottom:73px; "></div><div class="dot" style="left:42px; bottom:73px; "></div><div class="dot" style="left:44px; bottom:74px; "></div><div class="dot" style="left:46px; bottom:74px; "></div><div class="dot" style="left:48px; bottom:74px; "></div><div class="dot" style="left:50px; bottom:74px; "></div><div class="dot" style="left:52px; bottom:74px; "></div><div class="dot" style="left:54px; bottom:74px; "></div><div class="dot" style="left:56px; bottom:75px; "></div><div class="dot" style="left:58px; bottom:75px; "></div><div class="dot" style="left:60px; bottom:75px; "></div><div class="dot" style="left:62px; bottom:75px; "></div><div class="dot" style="left:64px; bottom:75px; "></div><div class="dot" style="left:66px; bottom:75px; "></div><div class="dot" style="left:68px; bottom:75px; "></div><div class="dot" style="left:70px; bottom:75px; "></div><div class="dot" style="left:72px; bottom:75px; "></div><div class="dot" style="left:74px; bottom:75px; "></div><div class="dot" style="left:76px; bottom:75px; "></div><div class="dot" style="left:78px; bottom:75px; "></div><div class="dot" style="left:80px; bottom:75px; "></div><div class="dot" style="left:82px; bottom:75px; "></div><div class="dot" style="left:84px; bottom:75px; "></div><div class="dot" style="left:86px; bottom:75px; "></div><div class="dot" style="left:88px; bottom:75px; "></div><div class="dot" style="left:90px; bottom:75px; "></div><div class="dot" style="left:92px; bottom:75px; "></div><div class="dot" style="left:94px; bottom:75px; "></div><div class="dot" style="left:96px; bottom:76px; "></div><div class="dot" style="left:98px; bottom:76px; "></div><div class="dot" style="left:100px; bottom:76px; "></div><div class="dot" style="left:102px; bottom:76px; "></div><div class="dot" style="left:104px; bottom:76px; "></div><div class="dot" style="left:106px; bottom:76px; "></div><div class="dot" style="left:108px; bottom:77px; "></div><div class="dot" style="left:110px; bottom:77px; "></div><div class="dot" style="left:112px; bottom:77px; "></div><div class="dot" style="left:114px; bottom:78px; "></div><div class="dot" style="left:116px; bottom:78px; "></div><div class="dot" style="left:118px; bottom:79px; "></div><div class="dot" style="left:120px; bottom:80px; "></div><div class="dot" style="left:122px; bottom:81px; "></div><div class="dot" style="left:124px; bottom:82px; "></div><div class="dot" style="left:126px; bottom:83px; "></div><div class="dot" style="left:128px; bottom:85px; "></div><div class="dot" style="left:130px; bottom:87px; "></div><div class="dot" style="left:132px; bottom:89px; "></div><div class="dot" style="left:134px; bottom:92px; "></div><div class="dot" style="left:136px; bottom:96px; "></div><div class="dot" style="left:138px; bottom:100px; "></div><div class="dot" style="left:140px; bottom:105px; "></div><div class="dot" style="left:142px; bottom:111px; "></div><div class="dot" style="left:144px; bottom:118px; "></div><div class="dot" style="left:146px; bottom:127px; "></div><div class="dot" style="left:148px; bottom:137px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInCircle</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:1px; "></div><div class="dot" style="left:16px; bottom:1px; "></div><div class="dot" style="left:18px; bottom:1px; "></div><div class="dot" style="left:20px; bottom:1px; "></div><div class="dot" style="left:22px; bottom:2px; "></div><div class="dot" style="left:24px; bottom:2px; "></div><div class="dot" style="left:26px; bottom:2px; "></div><div class="dot" style="left:28px; bottom:3px; "></div><div class="dot" style="left:30px; bottom:3px; "></div><div class="dot" style="left:32px; bottom:3px; "></div><div class="dot" style="left:34px; bottom:4px; "></div><div class="dot" style="left:36px; bottom:4px; "></div><div class="dot" style="left:38px; bottom:5px; "></div><div class="dot" style="left:40px; bottom:5px; "></div><div class="dot" style="left:42px; bottom:6px; "></div><div class="dot" style="left:44px; bottom:7px; "></div><div class="dot" style="left:46px; bottom:7px; "></div><div class="dot" style="left:48px; bottom:8px; "></div><div class="dot" style="left:50px; bottom:9px; "></div><div class="dot" style="left:52px; bottom:9px; "></div><div class="dot" style="left:54px; bottom:10px; "></div><div class="dot" style="left:56px; bottom:11px; "></div><div class="dot" style="left:58px; bottom:12px; "></div><div class="dot" style="left:60px; bottom:13px; "></div><div class="dot" style="left:62px; bottom:13px; "></div><div class="dot" style="left:64px; bottom:14px; "></div><div class="dot" style="left:66px; bottom:15px; "></div><div class="dot" style="left:68px; bottom:16px; "></div><div class="dot" style="left:70px; bottom:17px; "></div><div class="dot" style="left:72px; bottom:18px; "></div><div class="dot" style="left:74px; bottom:20px; "></div><div class="dot" style="left:76px; bottom:21px; "></div><div class="dot" style="left:78px; bottom:22px; "></div><div class="dot" style="left:80px; bottom:23px; "></div><div class="dot" style="left:82px; bottom:24px; "></div><div class="dot" style="left:84px; bottom:26px; "></div><div class="dot" style="left:86px; bottom:27px; "></div><div class="dot" style="left:88px; bottom:29px; "></div><div class="dot" style="left:90px; bottom:30px; "></div><div class="dot" style="left:92px; bottom:32px; "></div><div class="dot" style="left:94px; bottom:33px; "></div><div class="dot" style="left:96px; bottom:35px; "></div><div class="dot" style="left:98px; bottom:36px; "></div><div class="dot" style="left:100px; bottom:38px; "></div><div class="dot" style="left:102px; bottom:40px; "></div><div class="dot" style="left:104px; bottom:42px; "></div><div class="dot" style="left:106px; bottom:44px; "></div><div class="dot" style="left:108px; bottom:46px; "></div><div class="dot" style="left:110px; bottom:48px; "></div><div class="dot" style="left:112px; bottom:50px; "></div><div class="dot" style="left:114px; bottom:53px; "></div><div class="dot" style="left:116px; bottom:55px; "></div><div class="dot" style="left:118px; bottom:57px; "></div><div class="dot" style="left:120px; bottom:60px; "></div><div class="dot" style="left:122px; bottom:63px; "></div><div class="dot" style="left:124px; bottom:66px; "></div><div class="dot" style="left:126px; bottom:69px; "></div><div class="dot" style="left:128px; bottom:72px; "></div><div class="dot" style="left:130px; bottom:75px; "></div><div class="dot" style="left:132px; bottom:79px; "></div><div class="dot" style="left:134px; bottom:83px; "></div><div class="dot" style="left:136px; bottom:87px; "></div><div class="dot" style="left:138px; bottom:91px; "></div><div class="dot" style="left:140px; bottom:96px; "></div><div class="dot" style="left:142px; bottom:102px; "></div><div class="dot" style="left:144px; bottom:108px; "></div><div class="dot" style="left:146px; bottom:116px; "></div><div class="dot" style="left:148px; bottom:126px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutCircle</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:24px; "></div><div class="dot" style="left:4px; bottom:34px; "></div><div class="dot" style="left:6px; bottom:42px; "></div><div class="dot" style="left:8px; bottom:48px; "></div><div class="dot" style="left:10px; bottom:54px; "></div><div class="dot" style="left:12px; bottom:59px; "></div><div class="dot" style="left:14px; bottom:63px; "></div><div class="dot" style="left:16px; bottom:67px; "></div><div class="dot" style="left:18px; bottom:71px; "></div><div class="dot" style="left:20px; bottom:75px; "></div><div class="dot" style="left:22px; bottom:78px; "></div><div class="dot" style="left:24px; bottom:81px; "></div><div class="dot" style="left:26px; bottom:84px; "></div><div class="dot" style="left:28px; bottom:87px; "></div><div class="dot" style="left:30px; bottom:90px; "></div><div class="dot" style="left:32px; bottom:93px; "></div><div class="dot" style="left:34px; bottom:95px; "></div><div class="dot" style="left:36px; bottom:97px; "></div><div class="dot" style="left:38px; bottom:100px; "></div><div class="dot" style="left:40px; bottom:102px; "></div><div class="dot" style="left:42px; bottom:104px; "></div><div class="dot" style="left:44px; bottom:106px; "></div><div class="dot" style="left:46px; bottom:108px; "></div><div class="dot" style="left:48px; bottom:110px; "></div><div class="dot" style="left:50px; bottom:112px; "></div><div class="dot" style="left:52px; bottom:114px; "></div><div class="dot" style="left:54px; bottom:115px; "></div><div class="dot" style="left:56px; bottom:117px; "></div><div class="dot" style="left:58px; bottom:118px; "></div><div class="dot" style="left:60px; bottom:120px; "></div><div class="dot" style="left:62px; bottom:121px; "></div><div class="dot" style="left:64px; bottom:123px; "></div><div class="dot" style="left:66px; bottom:124px; "></div><div class="dot" style="left:68px; bottom:126px; "></div><div class="dot" style="left:70px; bottom:127px; "></div><div class="dot" style="left:72px; bottom:128px; "></div><div class="dot" style="left:74px; bottom:129px; "></div><div class="dot" style="left:76px; bottom:130px; "></div><div class="dot" style="left:78px; bottom:132px; "></div><div class="dot" style="left:80px; bottom:133px; "></div><div class="dot" style="left:82px; bottom:134px; "></div><div class="dot" style="left:84px; bottom:135px; "></div><div class="dot" style="left:86px; bottom:136px; "></div><div class="dot" style="left:88px; bottom:137px; "></div><div class="dot" style="left:90px; bottom:137px; "></div><div class="dot" style="left:92px; bottom:138px; "></div><div class="dot" style="left:94px; bottom:139px; "></div><div class="dot" style="left:96px; bottom:140px; "></div><div class="dot" style="left:98px; bottom:141px; "></div><div class="dot" style="left:100px; bottom:141px; "></div><div class="dot" style="left:102px; bottom:142px; "></div><div class="dot" style="left:104px; bottom:143px; "></div><div class="dot" style="left:106px; bottom:143px; "></div><div class="dot" style="left:108px; bottom:144px; "></div><div class="dot" style="left:110px; bottom:145px; "></div><div class="dot" style="left:112px; bottom:145px; "></div><div class="dot" style="left:114px; bottom:146px; "></div><div class="dot" style="left:116px; bottom:146px; "></div><div class="dot" style="left:118px; bottom:147px; "></div><div class="dot" style="left:120px; bottom:147px; "></div><div class="dot" style="left:122px; bottom:147px; "></div><div class="dot" style="left:124px; bottom:148px; "></div><div class="dot" style="left:126px; bottom:148px; "></div><div class="dot" style="left:128px; bottom:148px; "></div><div class="dot" style="left:130px; bottom:149px; "></div><div class="dot" style="left:132px; bottom:149px; "></div><div class="dot" style="left:134px; bottom:149px; "></div><div class="dot" style="left:136px; bottom:149px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInOutCircle</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:1px; "></div><div class="dot" style="left:12px; bottom:1px; "></div><div class="dot" style="left:14px; bottom:1px; "></div><div class="dot" style="left:16px; bottom:2px; "></div><div class="dot" style="left:18px; bottom:2px; "></div><div class="dot" style="left:20px; bottom:3px; "></div><div class="dot" style="left:22px; bottom:3px; "></div><div class="dot" style="left:24px; bottom:4px; "></div><div class="dot" style="left:26px; bottom:5px; "></div><div class="dot" style="left:28px; bottom:5px; "></div><div class="dot" style="left:30px; bottom:6px; "></div><div class="dot" style="left:32px; bottom:7px; "></div><div class="dot" style="left:34px; bottom:8px; "></div><div class="dot" style="left:36px; bottom:9px; "></div><div class="dot" style="left:38px; bottom:10px; "></div><div class="dot" style="left:40px; bottom:12px; "></div><div class="dot" style="left:42px; bottom:13px; "></div><div class="dot" style="left:44px; bottom:14px; "></div><div class="dot" style="left:46px; bottom:16px; "></div><div class="dot" style="left:48px; bottom:17px; "></div><div class="dot" style="left:50px; bottom:19px; "></div><div class="dot" style="left:52px; bottom:21px; "></div><div class="dot" style="left:54px; bottom:23px; "></div><div class="dot" style="left:56px; bottom:25px; "></div><div class="dot" style="left:58px; bottom:27px; "></div><div class="dot" style="left:60px; bottom:30px; "></div><div class="dot" style="left:62px; bottom:33px; "></div><div class="dot" style="left:64px; bottom:36px; "></div><div class="dot" style="left:66px; bottom:39px; "></div><div class="dot" style="left:68px; bottom:43px; "></div><div class="dot" style="left:70px; bottom:48px; "></div><div class="dot" style="left:72px; bottom:54px; "></div><div class="dot" style="left:74px; bottom:63px; "></div><div class="dot" style="left:76px; bottom:87px; "></div><div class="dot" style="left:78px; bottom:96px; "></div><div class="dot" style="left:80px; bottom:102px; "></div><div class="dot" style="left:82px; bottom:107px; "></div><div class="dot" style="left:84px; bottom:111px; "></div><div class="dot" style="left:86px; bottom:114px; "></div><div class="dot" style="left:88px; bottom:117px; "></div><div class="dot" style="left:90px; bottom:120px; "></div><div class="dot" style="left:92px; bottom:123px; "></div><div class="dot" style="left:94px; bottom:125px; "></div><div class="dot" style="left:96px; bottom:127px; "></div><div class="dot" style="left:98px; bottom:129px; "></div><div class="dot" style="left:100px; bottom:131px; "></div><div class="dot" style="left:102px; bottom:133px; "></div><div class="dot" style="left:104px; bottom:134px; "></div><div class="dot" style="left:106px; bottom:136px; "></div><div class="dot" style="left:108px; bottom:137px; "></div><div class="dot" style="left:110px; bottom:138px; "></div><div class="dot" style="left:112px; bottom:140px; "></div><div class="dot" style="left:114px; bottom:141px; "></div><div class="dot" style="left:116px; bottom:142px; "></div><div class="dot" style="left:118px; bottom:143px; "></div><div class="dot" style="left:120px; bottom:144px; "></div><div class="dot" style="left:122px; bottom:145px; "></div><div class="dot" style="left:124px; bottom:145px; "></div><div class="dot" style="left:126px; bottom:146px; "></div><div class="dot" style="left:128px; bottom:147px; "></div><div class="dot" style="left:130px; bottom:147px; "></div><div class="dot" style="left:132px; bottom:148px; "></div><div class="dot" style="left:134px; bottom:148px; "></div><div class="dot" style="left:136px; bottom:149px; "></div><div class="dot" style="left:138px; bottom:149px; "></div><div class="dot" style="left:140px; bottom:149px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutInCircle</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:17px; "></div><div class="dot" style="left:4px; bottom:24px; "></div><div class="dot" style="left:6px; bottom:29px; "></div><div class="dot" style="left:8px; bottom:34px; "></div><div class="dot" style="left:10px; bottom:37px; "></div><div class="dot" style="left:12px; bottom:41px; "></div><div class="dot" style="left:14px; bottom:44px; "></div><div class="dot" style="left:16px; bottom:46px; "></div><div class="dot" style="left:18px; bottom:49px; "></div><div class="dot" style="left:20px; bottom:51px; "></div><div class="dot" style="left:22px; bottom:53px; "></div><div class="dot" style="left:24px; bottom:55px; "></div><div class="dot" style="left:26px; bottom:57px; "></div><div class="dot" style="left:28px; bottom:58px; "></div><div class="dot" style="left:30px; bottom:60px; "></div><div class="dot" style="left:32px; bottom:61px; "></div><div class="dot" style="left:34px; bottom:63px; "></div><div class="dot" style="left:36px; bottom:64px; "></div><div class="dot" style="left:38px; bottom:65px; "></div><div class="dot" style="left:40px; bottom:66px; "></div><div class="dot" style="left:42px; bottom:67px; "></div><div class="dot" style="left:44px; bottom:68px; "></div><div class="dot" style="left:46px; bottom:69px; "></div><div class="dot" style="left:48px; bottom:70px; "></div><div class="dot" style="left:50px; bottom:71px; "></div><div class="dot" style="left:52px; bottom:71px; "></div><div class="dot" style="left:54px; bottom:72px; "></div><div class="dot" style="left:56px; bottom:73px; "></div><div class="dot" style="left:58px; bottom:73px; "></div><div class="dot" style="left:60px; bottom:73px; "></div><div class="dot" style="left:62px; bottom:74px; "></div><div class="dot" style="left:64px; bottom:74px; "></div><div class="dot" style="left:66px; bottom:74px; "></div><div class="dot" style="left:68px; bottom:75px; "></div><div class="dot" style="left:70px; bottom:75px; "></div><div class="dot" style="left:72px; bottom:75px; "></div><div class="dot" style="left:74px; bottom:75px; "></div><div class="dot" style="left:76px; bottom:75px; "></div><div class="dot" style="left:78px; bottom:75px; "></div><div class="dot" style="left:80px; bottom:75px; "></div><div class="dot" style="left:82px; bottom:75px; "></div><div class="dot" style="left:84px; bottom:76px; "></div><div class="dot" style="left:86px; bottom:76px; "></div><div class="dot" style="left:88px; bottom:76px; "></div><div class="dot" style="left:90px; bottom:77px; "></div><div class="dot" style="left:92px; bottom:77px; "></div><div class="dot" style="left:94px; bottom:77px; "></div><div class="dot" style="left:96px; bottom:78px; "></div><div class="dot" style="left:98px; bottom:79px; "></div><div class="dot" style="left:100px; bottom:79px; "></div><div class="dot" style="left:102px; bottom:80px; "></div><div class="dot" style="left:104px; bottom:81px; "></div><div class="dot" style="left:106px; bottom:82px; "></div><div class="dot" style="left:108px; bottom:83px; "></div><div class="dot" style="left:110px; bottom:84px; "></div><div class="dot" style="left:112px; bottom:85px; "></div><div class="dot" style="left:114px; bottom:86px; "></div><div class="dot" style="left:116px; bottom:87px; "></div><div class="dot" style="left:118px; bottom:89px; "></div><div class="dot" style="left:120px; bottom:90px; "></div><div class="dot" style="left:122px; bottom:92px; "></div><div class="dot" style="left:124px; bottom:93px; "></div><div class="dot" style="left:126px; bottom:95px; "></div><div class="dot" style="left:128px; bottom:97px; "></div><div class="dot" style="left:130px; bottom:99px; "></div><div class="dot" style="left:132px; bottom:101px; "></div><div class="dot" style="left:134px; bottom:104px; "></div><div class="dot" style="left:136px; bottom:106px; "></div><div class="dot" style="left:138px; bottom:109px; "></div><div class="dot" style="left:140px; bottom:113px; "></div><div class="dot" style="left:142px; bottom:116px; "></div><div class="dot" style="left:144px; bottom:121px; "></div><div class="dot" style="left:146px; bottom:126px; "></div><div class="dot" style="left:148px; bottom:133px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInBack</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:-1px; "></div><div class="dot" style="left:10px; bottom:-1px; "></div><div class="dot" style="left:12px; bottom:-1px; "></div><div class="dot" style="left:14px; bottom:-2px; "></div><div class="dot" style="left:16px; bottom:-2px; "></div><div class="dot" style="left:18px; bottom:-3px; "></div><div class="dot" style="left:20px; bottom:-4px; "></div><div class="dot" style="left:22px; bottom:-4px; "></div><div class="dot" style="left:24px; bottom:-5px; "></div><div class="dot" style="left:26px; bottom:-6px; "></div><div class="dot" style="left:28px; bottom:-6px; "></div><div class="dot" style="left:30px; bottom:-7px; "></div><div class="dot" style="left:32px; bottom:-8px; "></div><div class="dot" style="left:34px; bottom:-8px; "></div><div class="dot" style="left:36px; bottom:-9px; "></div><div class="dot" style="left:38px; bottom:-10px; "></div><div class="dot" style="left:40px; bottom:-10px; "></div><div class="dot" style="left:42px; bottom:-11px; "></div><div class="dot" style="left:44px; bottom:-12px; "></div><div class="dot" style="left:46px; bottom:-12px; "></div><div class="dot" style="left:48px; bottom:-13px; "></div><div class="dot" style="left:50px; bottom:-13px; "></div><div class="dot" style="left:52px; bottom:-14px; "></div><div class="dot" style="left:54px; bottom:-14px; "></div><div class="dot" style="left:56px; bottom:-14px; "></div><div class="dot" style="left:58px; bottom:-15px; "></div><div class="dot" style="left:60px; bottom:-15px; "></div><div class="dot" style="left:62px; bottom:-15px; "></div><div class="dot" style="left:64px; bottom:-15px; "></div><div class="dot" style="left:66px; bottom:-15px; "></div><div class="dot" style="left:68px; bottom:-15px; "></div><div class="dot" style="left:70px; bottom:-14px; "></div><div class="dot" style="left:72px; bottom:-14px; "></div><div class="dot" style="left:74px; bottom:-13px; "></div><div class="dot" style="left:76px; bottom:-13px; "></div><div class="dot" style="left:78px; bottom:-12px; "></div><div class="dot" style="left:80px; bottom:-11px; "></div><div class="dot" style="left:82px; bottom:-10px; "></div><div class="dot" style="left:84px; bottom:-9px; "></div><div class="dot" style="left:86px; bottom:-8px; "></div><div class="dot" style="left:88px; bottom:-6px; "></div><div class="dot" style="left:90px; bottom:-4px; "></div><div class="dot" style="left:92px; bottom:-3px; "></div><div class="dot" style="left:94px; bottom:-1px; "></div><div class="dot" style="left:96px; bottom:2px; "></div><div class="dot" style="left:98px; bottom:4px; "></div><div class="dot" style="left:100px; bottom:7px; "></div><div class="dot" style="left:102px; bottom:9px; "></div><div class="dot" style="left:104px; bottom:12px; "></div><div class="dot" style="left:106px; bottom:16px; "></div><div class="dot" style="left:108px; bottom:19px; "></div><div class="dot" style="left:110px; bottom:23px; "></div><div class="dot" style="left:112px; bottom:26px; "></div><div class="dot" style="left:114px; bottom:30px; "></div><div class="dot" style="left:116px; bottom:35px; "></div><div class="dot" style="left:118px; bottom:39px; "></div><div class="dot" style="left:120px; bottom:44px; "></div><div class="dot" style="left:122px; bottom:49px; "></div><div class="dot" style="left:124px; bottom:55px; "></div><div class="dot" style="left:126px; bottom:60px; "></div><div class="dot" style="left:128px; bottom:66px; "></div><div class="dot" style="left:130px; bottom:72px; "></div><div class="dot" style="left:132px; bottom:79px; "></div><div class="dot" style="left:134px; bottom:85px; "></div><div class="dot" style="left:136px; bottom:92px; "></div><div class="dot" style="left:138px; bottom:100px; "></div><div class="dot" style="left:140px; bottom:107px; "></div><div class="dot" style="left:142px; bottom:115px; "></div><div class="dot" style="left:144px; bottom:123px; "></div><div class="dot" style="left:146px; bottom:132px; "></div><div class="dot" style="left:148px; bottom:141px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutBack</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:9px; "></div><div class="dot" style="left:4px; bottom:18px; "></div><div class="dot" style="left:6px; bottom:27px; "></div><div class="dot" style="left:8px; bottom:35px; "></div><div class="dot" style="left:10px; bottom:43px; "></div><div class="dot" style="left:12px; bottom:50px; "></div><div class="dot" style="left:14px; bottom:58px; "></div><div class="dot" style="left:16px; bottom:65px; "></div><div class="dot" style="left:18px; bottom:71px; "></div><div class="dot" style="left:20px; bottom:78px; "></div><div class="dot" style="left:22px; bottom:84px; "></div><div class="dot" style="left:24px; bottom:90px; "></div><div class="dot" style="left:26px; bottom:95px; "></div><div class="dot" style="left:28px; bottom:101px; "></div><div class="dot" style="left:30px; bottom:106px; "></div><div class="dot" style="left:32px; bottom:111px; "></div><div class="dot" style="left:34px; bottom:115px; "></div><div class="dot" style="left:36px; bottom:120px; "></div><div class="dot" style="left:38px; bottom:124px; "></div><div class="dot" style="left:40px; bottom:127px; "></div><div class="dot" style="left:42px; bottom:131px; "></div><div class="dot" style="left:44px; bottom:134px; "></div><div class="dot" style="left:46px; bottom:138px; "></div><div class="dot" style="left:48px; bottom:141px; "></div><div class="dot" style="left:50px; bottom:143px; "></div><div class="dot" style="left:52px; bottom:146px; "></div><div class="dot" style="left:54px; bottom:148px; "></div><div class="dot" style="left:56px; bottom:151px; "></div><div class="dot" style="left:58px; bottom:153px; "></div><div class="dot" style="left:60px; bottom:154px; "></div><div class="dot" style="left:62px; bottom:156px; "></div><div class="dot" style="left:64px; bottom:158px; "></div><div class="dot" style="left:66px; bottom:159px; "></div><div class="dot" style="left:68px; bottom:160px; "></div><div class="dot" style="left:70px; bottom:161px; "></div><div class="dot" style="left:72px; bottom:162px; "></div><div class="dot" style="left:74px; bottom:163px; "></div><div class="dot" style="left:76px; bottom:163px; "></div><div class="dot" style="left:78px; bottom:164px; "></div><div class="dot" style="left:80px; bottom:164px; "></div><div class="dot" style="left:82px; bottom:165px; "></div><div class="dot" style="left:84px; bottom:165px; "></div><div class="dot" style="left:86px; bottom:165px; "></div><div class="dot" style="left:88px; bottom:165px; "></div><div class="dot" style="left:90px; bottom:165px; "></div><div class="dot" style="left:92px; bottom:165px; "></div><div class="dot" style="left:94px; bottom:164px; "></div><div class="dot" style="left:96px; bottom:164px; "></div><div class="dot" style="left:98px; bottom:164px; "></div><div class="dot" style="left:100px; bottom:163px; "></div><div class="dot" style="left:102px; bottom:163px; "></div><div class="dot" style="left:104px; bottom:162px; "></div><div class="dot" style="left:106px; bottom:162px; "></div><div class="dot" style="left:108px; bottom:161px; "></div><div class="dot" style="left:110px; bottom:160px; "></div><div class="dot" style="left:112px; bottom:160px; "></div><div class="dot" style="left:114px; bottom:159px; "></div><div class="dot" style="left:116px; bottom:158px; "></div><div class="dot" style="left:118px; bottom:158px; "></div><div class="dot" style="left:120px; bottom:157px; "></div><div class="dot" style="left:122px; bottom:156px; "></div><div class="dot" style="left:124px; bottom:156px; "></div><div class="dot" style="left:126px; bottom:155px; "></div><div class="dot" style="left:128px; bottom:154px; "></div><div class="dot" style="left:130px; bottom:154px; "></div><div class="dot" style="left:132px; bottom:153px; "></div><div class="dot" style="left:134px; bottom:152px; "></div><div class="dot" style="left:136px; bottom:152px; "></div><div class="dot" style="left:138px; bottom:151px; "></div><div class="dot" style="left:140px; bottom:151px; "></div><div class="dot" style="left:142px; bottom:151px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInOutBack</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:-1px; "></div><div class="dot" style="left:8px; bottom:-1px; "></div><div class="dot" style="left:10px; bottom:-2px; "></div><div class="dot" style="left:12px; bottom:-2px; "></div><div class="dot" style="left:14px; bottom:-3px; "></div><div class="dot" style="left:16px; bottom:-4px; "></div><div class="dot" style="left:18px; bottom:-5px; "></div><div class="dot" style="left:20px; bottom:-5px; "></div><div class="dot" style="left:22px; bottom:-6px; "></div><div class="dot" style="left:24px; bottom:-6px; "></div><div class="dot" style="left:26px; bottom:-7px; "></div><div class="dot" style="left:28px; bottom:-7px; "></div><div class="dot" style="left:30px; bottom:-7px; "></div><div class="dot" style="left:32px; bottom:-7px; "></div><div class="dot" style="left:34px; bottom:-7px; "></div><div class="dot" style="left:36px; bottom:-7px; "></div><div class="dot" style="left:38px; bottom:-6px; "></div><div class="dot" style="left:40px; bottom:-6px; "></div><div class="dot" style="left:42px; bottom:-4px; "></div><div class="dot" style="left:44px; bottom:-3px; "></div><div class="dot" style="left:46px; bottom:-1px; "></div><div class="dot" style="left:48px; bottom:1px; "></div><div class="dot" style="left:50px; bottom:3px; "></div><div class="dot" style="left:52px; bottom:6px; "></div><div class="dot" style="left:54px; bottom:9px; "></div><div class="dot" style="left:56px; bottom:13px; "></div><div class="dot" style="left:58px; bottom:17px; "></div><div class="dot" style="left:60px; bottom:22px; "></div><div class="dot" style="left:62px; bottom:27px; "></div><div class="dot" style="left:64px; bottom:33px; "></div><div class="dot" style="left:66px; bottom:39px; "></div><div class="dot" style="left:68px; bottom:46px; "></div><div class="dot" style="left:70px; bottom:54px; "></div><div class="dot" style="left:72px; bottom:62px; "></div><div class="dot" style="left:74px; bottom:70px; "></div><div class="dot" style="left:76px; bottom:80px; "></div><div class="dot" style="left:78px; bottom:88px; "></div><div class="dot" style="left:80px; bottom:96px; "></div><div class="dot" style="left:82px; bottom:104px; "></div><div class="dot" style="left:84px; bottom:111px; "></div><div class="dot" style="left:86px; bottom:117px; "></div><div class="dot" style="left:88px; bottom:123px; "></div><div class="dot" style="left:90px; bottom:128px; "></div><div class="dot" style="left:92px; bottom:133px; "></div><div class="dot" style="left:94px; bottom:137px; "></div><div class="dot" style="left:96px; bottom:141px; "></div><div class="dot" style="left:98px; bottom:144px; "></div><div class="dot" style="left:100px; bottom:147px; "></div><div class="dot" style="left:102px; bottom:149px; "></div><div class="dot" style="left:104px; bottom:151px; "></div><div class="dot" style="left:106px; bottom:153px; "></div><div class="dot" style="left:108px; bottom:154px; "></div><div class="dot" style="left:110px; bottom:156px; "></div><div class="dot" style="left:112px; bottom:156px; "></div><div class="dot" style="left:114px; bottom:157px; "></div><div class="dot" style="left:116px; bottom:157px; "></div><div class="dot" style="left:118px; bottom:157px; "></div><div class="dot" style="left:120px; bottom:157px; "></div><div class="dot" style="left:122px; bottom:157px; "></div><div class="dot" style="left:124px; bottom:157px; "></div><div class="dot" style="left:126px; bottom:156px; "></div><div class="dot" style="left:128px; bottom:156px; "></div><div class="dot" style="left:130px; bottom:155px; "></div><div class="dot" style="left:132px; bottom:155px; "></div><div class="dot" style="left:134px; bottom:154px; "></div><div class="dot" style="left:136px; bottom:153px; "></div><div class="dot" style="left:138px; bottom:152px; "></div><div class="dot" style="left:140px; bottom:152px; "></div><div class="dot" style="left:142px; bottom:151px; "></div><div class="dot" style="left:144px; bottom:151px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInElastic</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:0px; "></div><div class="dot" style="left:18px; bottom:0px; "></div><div class="dot" style="left:20px; bottom:0px; "></div><div class="dot" style="left:22px; bottom:0px; "></div><div class="dot" style="left:24px; bottom:0px; "></div><div class="dot" style="left:26px; bottom:0px; "></div><div class="dot" style="left:28px; bottom:0px; "></div><div class="dot" style="left:30px; bottom:0px; "></div><div class="dot" style="left:32px; bottom:0px; "></div><div class="dot" style="left:34px; bottom:0px; "></div><div class="dot" style="left:36px; bottom:-1px; "></div><div class="dot" style="left:38px; bottom:-1px; "></div><div class="dot" style="left:40px; bottom:-1px; "></div><div class="dot" style="left:42px; bottom:-1px; "></div><div class="dot" style="left:44px; bottom:-1px; "></div><div class="dot" style="left:46px; bottom:-1px; "></div><div class="dot" style="left:48px; bottom:-1px; "></div><div class="dot" style="left:50px; bottom:-1px; "></div><div class="dot" style="left:52px; bottom:0px; "></div><div class="dot" style="left:54px; bottom:0px; "></div><div class="dot" style="left:56px; bottom:1px; "></div><div class="dot" style="left:58px; bottom:1px; "></div><div class="dot" style="left:60px; bottom:2px; "></div><div class="dot" style="left:62px; bottom:2px; "></div><div class="dot" style="left:64px; bottom:3px; "></div><div class="dot" style="left:66px; bottom:3px; "></div><div class="dot" style="left:68px; bottom:3px; "></div><div class="dot" style="left:70px; bottom:2px; "></div><div class="dot" style="left:72px; bottom:2px; "></div><div class="dot" style="left:74px; bottom:1px; "></div><div class="dot" style="left:76px; bottom:-1px; "></div><div class="dot" style="left:78px; bottom:-2px; "></div><div class="dot" style="left:80px; bottom:-4px; "></div><div class="dot" style="left:82px; bottom:-5px; "></div><div class="dot" style="left:84px; bottom:-7px; "></div><div class="dot" style="left:86px; bottom:-8px; "></div><div class="dot" style="left:88px; bottom:-8px; "></div><div class="dot" style="left:90px; bottom:-8px; "></div><div class="dot" style="left:92px; bottom:-7px; "></div><div class="dot" style="left:94px; bottom:-5px; "></div><div class="dot" style="left:96px; bottom:-3px; "></div><div class="dot" style="left:98px; bottom:1px; "></div><div class="dot" style="left:100px; bottom:5px; "></div><div class="dot" style="left:102px; bottom:10px; "></div><div class="dot" style="left:104px; bottom:14px; "></div><div class="dot" style="left:106px; bottom:18px; "></div><div class="dot" style="left:108px; bottom:21px; "></div><div class="dot" style="left:110px; bottom:23px; "></div><div class="dot" style="left:112px; bottom:23px; "></div><div class="dot" style="left:114px; bottom:21px; "></div><div class="dot" style="left:116px; bottom:17px; "></div><div class="dot" style="left:118px; bottom:9px; "></div><div class="dot" style="left:120px; bottom:0px; "></div><div class="dot" style="left:122px; bottom:-11px; "></div><div class="dot" style="left:124px; bottom:-24px; "></div><div class="dot" style="left:126px; bottom:-37px; "></div><div class="dot" style="left:128px; bottom:-49px; "></div><div class="dot" style="left:130px; bottom:-59px; "></div><div class="dot" style="left:132px; bottom:-65px; "></div><div class="dot" style="left:134px; bottom:-66px; "></div><div class="dot" style="left:136px; bottom:-62px; "></div><div class="dot" style="left:138px; bottom:-51px; "></div><div class="dot" style="left:140px; bottom:-32px; "></div><div class="dot" style="left:142px; bottom:-7px; "></div><div class="dot" style="left:144px; bottom:24px; "></div><div class="dot" style="left:146px; bottom:59px; "></div><div class="dot" style="left:148px; bottom:95px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutElastic</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:19px; "></div><div class="dot" style="left:4px; bottom:44px; "></div><div class="dot" style="left:6px; bottom:74px; "></div><div class="dot" style="left:8px; bottom:105px; "></div><div class="dot" style="left:10px; bottom:134px; "></div><div class="dot" style="left:12px; bottom:159px; "></div><div class="dot" style="left:14px; bottom:179px; "></div><div class="dot" style="left:16px; bottom:194px; "></div><div class="dot" style="left:18px; bottom:203px; "></div><div class="dot" style="left:20px; bottom:206px; "></div><div class="dot" style="left:22px; bottom:204px; "></div><div class="dot" style="left:24px; bottom:198px; "></div><div class="dot" style="left:26px; bottom:190px; "></div><div class="dot" style="left:28px; bottom:180px; "></div><div class="dot" style="left:30px; bottom:169px; "></div><div class="dot" style="left:32px; bottom:158px; "></div><div class="dot" style="left:34px; bottom:149px; "></div><div class="dot" style="left:36px; bottom:141px; "></div><div class="dot" style="left:38px; bottom:136px; "></div><div class="dot" style="left:40px; bottom:132px; "></div><div class="dot" style="left:42px; bottom:130px; "></div><div class="dot" style="left:44px; bottom:131px; "></div><div class="dot" style="left:46px; bottom:132px; "></div><div class="dot" style="left:48px; bottom:135px; "></div><div class="dot" style="left:50px; bottom:139px; "></div><div class="dot" style="left:52px; bottom:142px; "></div><div class="dot" style="left:54px; bottom:146px; "></div><div class="dot" style="left:56px; bottom:150px; "></div><div class="dot" style="left:58px; bottom:152px; "></div><div class="dot" style="left:60px; bottom:155px; "></div><div class="dot" style="left:62px; bottom:156px; "></div><div class="dot" style="left:64px; bottom:157px; "></div><div class="dot" style="left:66px; bottom:157px; "></div><div class="dot" style="left:68px; bottom:156px; "></div><div class="dot" style="left:70px; bottom:156px; "></div><div class="dot" style="left:72px; bottom:154px; "></div><div class="dot" style="left:74px; bottom:153px; "></div><div class="dot" style="left:76px; bottom:152px; "></div><div class="dot" style="left:78px; bottom:150px; "></div><div class="dot" style="left:80px; bottom:149px; "></div><div class="dot" style="left:82px; bottom:149px; "></div><div class="dot" style="left:84px; bottom:148px; "></div><div class="dot" style="left:86px; bottom:148px; "></div><div class="dot" style="left:88px; bottom:148px; "></div><div class="dot" style="left:90px; bottom:148px; "></div><div class="dot" style="left:92px; bottom:148px; "></div><div class="dot" style="left:94px; bottom:148px; "></div><div class="dot" style="left:96px; bottom:149px; "></div><div class="dot" style="left:98px; bottom:149px; "></div><div class="dot" style="left:100px; bottom:150px; "></div><div class="dot" style="left:102px; bottom:150px; "></div><div class="dot" style="left:104px; bottom:150px; "></div><div class="dot" style="left:106px; bottom:151px; "></div><div class="dot" style="left:108px; bottom:151px; "></div><div class="dot" style="left:110px; bottom:151px; "></div><div class="dot" style="left:112px; bottom:151px; "></div><div class="dot" style="left:114px; bottom:151px; "></div><div class="dot" style="left:116px; bottom:151px; "></div><div class="dot" style="left:118px; bottom:150px; "></div><div class="dot" style="left:120px; bottom:150px; "></div><div class="dot" style="left:122px; bottom:150px; "></div><div class="dot" style="left:124px; bottom:150px; "></div><div class="dot" style="left:126px; bottom:150px; "></div><div class="dot" style="left:128px; bottom:150px; "></div><div class="dot" style="left:130px; bottom:150px; "></div><div class="dot" style="left:132px; bottom:150px; "></div><div class="dot" style="left:134px; bottom:150px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInOutElastic</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:0px; "></div><div class="dot" style="left:10px; bottom:0px; "></div><div class="dot" style="left:12px; bottom:0px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:0px; "></div><div class="dot" style="left:18px; bottom:0px; "></div><div class="dot" style="left:20px; bottom:0px; "></div><div class="dot" style="left:22px; bottom:-1px; "></div><div class="dot" style="left:24px; bottom:-1px; "></div><div class="dot" style="left:26px; bottom:-1px; "></div><div class="dot" style="left:28px; bottom:-1px; "></div><div class="dot" style="left:30px; bottom:-1px; "></div><div class="dot" style="left:32px; bottom:0px; "></div><div class="dot" style="left:34px; bottom:0px; "></div><div class="dot" style="left:36px; bottom:1px; "></div><div class="dot" style="left:38px; bottom:2px; "></div><div class="dot" style="left:40px; bottom:3px; "></div><div class="dot" style="left:42px; bottom:4px; "></div><div class="dot" style="left:44px; bottom:4px; "></div><div class="dot" style="left:46px; bottom:3px; "></div><div class="dot" style="left:48px; bottom:2px; "></div><div class="dot" style="left:50px; bottom:0px; "></div><div class="dot" style="left:52px; bottom:-4px; "></div><div class="dot" style="left:54px; bottom:-8px; "></div><div class="dot" style="left:56px; bottom:-12px; "></div><div class="dot" style="left:58px; bottom:-16px; "></div><div class="dot" style="left:60px; bottom:-18px; "></div><div class="dot" style="left:62px; bottom:-17px; "></div><div class="dot" style="left:64px; bottom:-12px; "></div><div class="dot" style="left:66px; bottom:-3px; "></div><div class="dot" style="left:68px; bottom:10px; "></div><div class="dot" style="left:70px; bottom:28px; "></div><div class="dot" style="left:72px; bottom:48px; "></div><div class="dot" style="left:74px; bottom:67px; "></div><div class="dot" style="left:76px; bottom:83px; "></div><div class="dot" style="left:78px; bottom:102px; "></div><div class="dot" style="left:80px; bottom:122px; "></div><div class="dot" style="left:82px; bottom:140px; "></div><div class="dot" style="left:84px; bottom:153px; "></div><div class="dot" style="left:86px; bottom:162px; "></div><div class="dot" style="left:88px; bottom:167px; "></div><div class="dot" style="left:90px; bottom:168px; "></div><div class="dot" style="left:92px; bottom:166px; "></div><div class="dot" style="left:94px; bottom:162px; "></div><div class="dot" style="left:96px; bottom:158px; "></div><div class="dot" style="left:98px; bottom:154px; "></div><div class="dot" style="left:100px; bottom:150px; "></div><div class="dot" style="left:102px; bottom:148px; "></div><div class="dot" style="left:104px; bottom:147px; "></div><div class="dot" style="left:106px; bottom:146px; "></div><div class="dot" style="left:108px; bottom:146px; "></div><div class="dot" style="left:110px; bottom:147px; "></div><div class="dot" style="left:112px; bottom:148px; "></div><div class="dot" style="left:114px; bottom:149px; "></div><div class="dot" style="left:116px; bottom:150px; "></div><div class="dot" style="left:118px; bottom:150px; "></div><div class="dot" style="left:120px; bottom:151px; "></div><div class="dot" style="left:122px; bottom:151px; "></div><div class="dot" style="left:124px; bottom:151px; "></div><div class="dot" style="left:126px; bottom:151px; "></div><div class="dot" style="left:128px; bottom:151px; "></div><div class="dot" style="left:130px; bottom:150px; "></div><div class="dot" style="left:132px; bottom:150px; "></div><div class="dot" style="left:134px; bottom:150px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInBounce</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:1px; "></div><div class="dot" style="left:4px; bottom:2px; "></div><div class="dot" style="left:6px; bottom:2px; "></div><div class="dot" style="left:8px; bottom:2px; "></div><div class="dot" style="left:10px; bottom:2px; "></div><div class="dot" style="left:12px; bottom:1px; "></div><div class="dot" style="left:14px; bottom:0px; "></div><div class="dot" style="left:16px; bottom:3px; "></div><div class="dot" style="left:18px; bottom:5px; "></div><div class="dot" style="left:20px; bottom:7px; "></div><div class="dot" style="left:22px; bottom:8px; "></div><div class="dot" style="left:24px; bottom:9px; "></div><div class="dot" style="left:26px; bottom:9px; "></div><div class="dot" style="left:28px; bottom:9px; "></div><div class="dot" style="left:30px; bottom:9px; "></div><div class="dot" style="left:32px; bottom:8px; "></div><div class="dot" style="left:34px; bottom:7px; "></div><div class="dot" style="left:36px; bottom:6px; "></div><div class="dot" style="left:38px; bottom:4px; "></div><div class="dot" style="left:40px; bottom:1px; "></div><div class="dot" style="left:42px; bottom:3px; "></div><div class="dot" style="left:44px; bottom:8px; "></div><div class="dot" style="left:46px; bottom:13px; "></div><div class="dot" style="left:48px; bottom:17px; "></div><div class="dot" style="left:50px; bottom:21px; "></div><div class="dot" style="left:52px; bottom:24px; "></div><div class="dot" style="left:54px; bottom:27px; "></div><div class="dot" style="left:56px; bottom:30px; "></div><div class="dot" style="left:58px; bottom:32px; "></div><div class="dot" style="left:60px; bottom:34px; "></div><div class="dot" style="left:62px; bottom:36px; "></div><div class="dot" style="left:64px; bottom:37px; "></div><div class="dot" style="left:66px; bottom:37px; "></div><div class="dot" style="left:68px; bottom:37px; "></div><div class="dot" style="left:70px; bottom:37px; "></div><div class="dot" style="left:72px; bottom:37px; "></div><div class="dot" style="left:74px; bottom:36px; "></div><div class="dot" style="left:76px; bottom:34px; "></div><div class="dot" style="left:78px; bottom:33px; "></div><div class="dot" style="left:80px; bottom:30px; "></div><div class="dot" style="left:82px; bottom:28px; "></div><div class="dot" style="left:84px; bottom:25px; "></div><div class="dot" style="left:86px; bottom:21px; "></div><div class="dot" style="left:88px; bottom:18px; "></div><div class="dot" style="left:90px; bottom:14px; "></div><div class="dot" style="left:92px; bottom:9px; "></div><div class="dot" style="left:94px; bottom:4px; "></div><div class="dot" style="left:96px; bottom:3px; "></div><div class="dot" style="left:98px; bottom:14px; "></div><div class="dot" style="left:100px; bottom:24px; "></div><div class="dot" style="left:102px; bottom:34px; "></div><div class="dot" style="left:104px; bottom:43px; "></div><div class="dot" style="left:106px; bottom:52px; "></div><div class="dot" style="left:108px; bottom:61px; "></div><div class="dot" style="left:110px; bottom:69px; "></div><div class="dot" style="left:112px; bottom:77px; "></div><div class="dot" style="left:114px; bottom:85px; "></div><div class="dot" style="left:116px; bottom:92px; "></div><div class="dot" style="left:118px; bottom:98px; "></div><div class="dot" style="left:120px; bottom:105px; "></div><div class="dot" style="left:122px; bottom:110px; "></div><div class="dot" style="left:124px; bottom:116px; "></div><div class="dot" style="left:126px; bottom:121px; "></div><div class="dot" style="left:128px; bottom:126px; "></div><div class="dot" style="left:130px; bottom:130px; "></div><div class="dot" style="left:132px; bottom:134px; "></div><div class="dot" style="left:134px; bottom:137px; "></div><div class="dot" style="left:136px; bottom:140px; "></div><div class="dot" style="left:138px; bottom:143px; "></div><div class="dot" style="left:140px; bottom:145px; "></div><div class="dot" style="left:142px; bottom:147px; "></div><div class="dot" style="left:144px; bottom:148px; "></div><div class="dot" style="left:146px; bottom:149px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeOutBounce</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:1px; "></div><div class="dot" style="left:6px; bottom:2px; "></div><div class="dot" style="left:8px; bottom:3px; "></div><div class="dot" style="left:10px; bottom:5px; "></div><div class="dot" style="left:12px; bottom:7px; "></div><div class="dot" style="left:14px; bottom:10px; "></div><div class="dot" style="left:16px; bottom:13px; "></div><div class="dot" style="left:18px; bottom:16px; "></div><div class="dot" style="left:20px; bottom:20px; "></div><div class="dot" style="left:22px; bottom:24px; "></div><div class="dot" style="left:24px; bottom:29px; "></div><div class="dot" style="left:26px; bottom:34px; "></div><div class="dot" style="left:28px; bottom:40px; "></div><div class="dot" style="left:30px; bottom:45px; "></div><div class="dot" style="left:32px; bottom:52px; "></div><div class="dot" style="left:34px; bottom:58px; "></div><div class="dot" style="left:36px; bottom:65px; "></div><div class="dot" style="left:38px; bottom:73px; "></div><div class="dot" style="left:40px; bottom:81px; "></div><div class="dot" style="left:42px; bottom:89px; "></div><div class="dot" style="left:44px; bottom:98px; "></div><div class="dot" style="left:46px; bottom:107px; "></div><div class="dot" style="left:48px; bottom:116px; "></div><div class="dot" style="left:50px; bottom:126px; "></div><div class="dot" style="left:52px; bottom:136px; "></div><div class="dot" style="left:54px; bottom:147px; "></div><div class="dot" style="left:56px; bottom:146px; "></div><div class="dot" style="left:58px; bottom:141px; "></div><div class="dot" style="left:60px; bottom:136px; "></div><div class="dot" style="left:62px; bottom:132px; "></div><div class="dot" style="left:64px; bottom:129px; "></div><div class="dot" style="left:66px; bottom:125px; "></div><div class="dot" style="left:68px; bottom:122px; "></div><div class="dot" style="left:70px; bottom:120px; "></div><div class="dot" style="left:72px; bottom:117px; "></div><div class="dot" style="left:74px; bottom:116px; "></div><div class="dot" style="left:76px; bottom:114px; "></div><div class="dot" style="left:78px; bottom:113px; "></div><div class="dot" style="left:80px; bottom:113px; "></div><div class="dot" style="left:82px; bottom:113px; "></div><div class="dot" style="left:84px; bottom:113px; "></div><div class="dot" style="left:86px; bottom:113px; "></div><div class="dot" style="left:88px; bottom:114px; "></div><div class="dot" style="left:90px; bottom:116px; "></div><div class="dot" style="left:92px; bottom:118px; "></div><div class="dot" style="left:94px; bottom:120px; "></div><div class="dot" style="left:96px; bottom:123px; "></div><div class="dot" style="left:98px; bottom:126px; "></div><div class="dot" style="left:100px; bottom:129px; "></div><div class="dot" style="left:102px; bottom:133px; "></div><div class="dot" style="left:104px; bottom:137px; "></div><div class="dot" style="left:106px; bottom:142px; "></div><div class="dot" style="left:108px; bottom:147px; "></div><div class="dot" style="left:110px; bottom:149px; "></div><div class="dot" style="left:112px; bottom:146px; "></div><div class="dot" style="left:114px; bottom:144px; "></div><div class="dot" style="left:116px; bottom:143px; "></div><div class="dot" style="left:118px; bottom:142px; "></div><div class="dot" style="left:120px; bottom:141px; "></div><div class="dot" style="left:122px; bottom:141px; "></div><div class="dot" style="left:124px; bottom:141px; "></div><div class="dot" style="left:126px; bottom:141px; "></div><div class="dot" style="left:128px; bottom:142px; "></div><div class="dot" style="left:130px; bottom:143px; "></div><div class="dot" style="left:132px; bottom:145px; "></div><div class="dot" style="left:134px; bottom:147px; "></div><div class="dot" style="left:136px; bottom:150px; "></div><div class="dot" style="left:138px; bottom:149px; "></div><div class="dot" style="left:140px; bottom:148px; "></div><div class="dot" style="left:142px; bottom:148px; "></div><div class="dot" style="left:144px; bottom:148px; "></div><div class="dot" style="left:146px; bottom:148px; "></div><div class="dot" style="left:148px; bottom:149px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">easeInOutBounce</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:1px; "></div><div class="dot" style="left:4px; bottom:1px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:1px; "></div><div class="dot" style="left:10px; bottom:3px; "></div><div class="dot" style="left:12px; bottom:4px; "></div><div class="dot" style="left:14px; bottom:5px; "></div><div class="dot" style="left:16px; bottom:4px; "></div><div class="dot" style="left:18px; bottom:3px; "></div><div class="dot" style="left:20px; bottom:1px; "></div><div class="dot" style="left:22px; bottom:4px; "></div><div class="dot" style="left:24px; bottom:8px; "></div><div class="dot" style="left:26px; bottom:12px; "></div><div class="dot" style="left:28px; bottom:15px; "></div><div class="dot" style="left:30px; bottom:17px; "></div><div class="dot" style="left:32px; bottom:18px; "></div><div class="dot" style="left:34px; bottom:19px; "></div><div class="dot" style="left:36px; bottom:18px; "></div><div class="dot" style="left:38px; bottom:17px; "></div><div class="dot" style="left:40px; bottom:15px; "></div><div class="dot" style="left:42px; bottom:12px; "></div><div class="dot" style="left:44px; bottom:9px; "></div><div class="dot" style="left:46px; bottom:4px; "></div><div class="dot" style="left:48px; bottom:1px; "></div><div class="dot" style="left:50px; bottom:12px; "></div><div class="dot" style="left:52px; bottom:22px; "></div><div class="dot" style="left:54px; bottom:31px; "></div><div class="dot" style="left:56px; bottom:39px; "></div><div class="dot" style="left:58px; bottom:46px; "></div><div class="dot" style="left:60px; bottom:52px; "></div><div class="dot" style="left:62px; bottom:58px; "></div><div class="dot" style="left:64px; bottom:63px; "></div><div class="dot" style="left:66px; bottom:67px; "></div><div class="dot" style="left:68px; bottom:70px; "></div><div class="dot" style="left:70px; bottom:72px; "></div><div class="dot" style="left:72px; bottom:74px; "></div><div class="dot" style="left:74px; bottom:75px; "></div><div class="dot" style="left:76px; bottom:75px; "></div><div class="dot" style="left:78px; bottom:76px; "></div><div class="dot" style="left:80px; bottom:78px; "></div><div class="dot" style="left:82px; bottom:80px; "></div><div class="dot" style="left:84px; bottom:83px; "></div><div class="dot" style="left:86px; bottom:87px; "></div><div class="dot" style="left:88px; bottom:92px; "></div><div class="dot" style="left:90px; bottom:98px; "></div><div class="dot" style="left:92px; bottom:104px; "></div><div class="dot" style="left:94px; bottom:111px; "></div><div class="dot" style="left:96px; bottom:119px; "></div><div class="dot" style="left:98px; bottom:128px; "></div><div class="dot" style="left:100px; bottom:138px; "></div><div class="dot" style="left:102px; bottom:149px; "></div><div class="dot" style="left:104px; bottom:146px; "></div><div class="dot" style="left:106px; bottom:141px; "></div><div class="dot" style="left:108px; bottom:138px; "></div><div class="dot" style="left:110px; bottom:135px; "></div><div class="dot" style="left:112px; bottom:133px; "></div><div class="dot" style="left:114px; bottom:132px; "></div><div class="dot" style="left:116px; bottom:131px; "></div><div class="dot" style="left:118px; bottom:132px; "></div><div class="dot" style="left:120px; bottom:133px; "></div><div class="dot" style="left:122px; bottom:135px; "></div><div class="dot" style="left:124px; bottom:138px; "></div><div class="dot" style="left:126px; bottom:142px; "></div><div class="dot" style="left:128px; bottom:146px; "></div><div class="dot" style="left:130px; bottom:149px; "></div><div class="dot" style="left:132px; bottom:147px; "></div><div class="dot" style="left:134px; bottom:146px; "></div><div class="dot" style="left:136px; bottom:145px; "></div><div class="dot" style="left:138px; bottom:146px; "></div><div class="dot" style="left:140px; bottom:147px; "></div><div class="dot" style="left:142px; bottom:149px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:149px; "></div><div class="dot" style="left:148px; bottom:149px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				&nbsp;
			</td>
		</tr>
		
		<tr>
			<td class="name">cubicEase</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:1px; "></div><div class="dot" style="left:4px; bottom:2px; "></div><div class="dot" style="left:6px; bottom:4px; "></div><div class="dot" style="left:8px; bottom:5px; "></div><div class="dot" style="left:10px; bottom:7px; "></div><div class="dot" style="left:12px; bottom:10px; "></div><div class="dot" style="left:14px; bottom:13px; "></div><div class="dot" style="left:16px; bottom:16px; "></div><div class="dot" style="left:18px; bottom:19px; "></div><div class="dot" style="left:20px; bottom:22px; "></div><div class="dot" style="left:22px; bottom:26px; "></div><div class="dot" style="left:24px; bottom:30px; "></div><div class="dot" style="left:26px; bottom:35px; "></div><div class="dot" style="left:28px; bottom:39px; "></div><div class="dot" style="left:30px; bottom:44px; "></div><div class="dot" style="left:32px; bottom:49px; "></div><div class="dot" style="left:34px; bottom:54px; "></div><div class="dot" style="left:36px; bottom:59px; "></div><div class="dot" style="left:38px; bottom:62px; "></div><div class="dot" style="left:40px; bottom:67px; "></div><div class="dot" style="left:42px; bottom:71px; "></div><div class="dot" style="left:44px; bottom:75px; "></div><div class="dot" style="left:46px; bottom:79px; "></div><div class="dot" style="left:48px; bottom:83px; "></div><div class="dot" style="left:50px; bottom:87px; "></div><div class="dot" style="left:52px; bottom:90px; "></div><div class="dot" style="left:54px; bottom:93px; "></div><div class="dot" style="left:56px; bottom:97px; "></div><div class="dot" style="left:58px; bottom:100px; "></div><div class="dot" style="left:60px; bottom:103px; "></div><div class="dot" style="left:62px; bottom:106px; "></div><div class="dot" style="left:64px; bottom:108px; "></div><div class="dot" style="left:66px; bottom:111px; "></div><div class="dot" style="left:68px; bottom:113px; "></div><div class="dot" style="left:70px; bottom:116px; "></div><div class="dot" style="left:72px; bottom:118px; "></div><div class="dot" style="left:74px; bottom:120px; "></div><div class="dot" style="left:76px; bottom:122px; "></div><div class="dot" style="left:78px; bottom:124px; "></div><div class="dot" style="left:80px; bottom:125px; "></div><div class="dot" style="left:82px; bottom:127px; "></div><div class="dot" style="left:84px; bottom:129px; "></div><div class="dot" style="left:86px; bottom:130px; "></div><div class="dot" style="left:88px; bottom:132px; "></div><div class="dot" style="left:90px; bottom:133px; "></div><div class="dot" style="left:92px; bottom:134px; "></div><div class="dot" style="left:94px; bottom:136px; "></div><div class="dot" style="left:96px; bottom:137px; "></div><div class="dot" style="left:98px; bottom:138px; "></div><div class="dot" style="left:100px; bottom:139px; "></div><div class="dot" style="left:102px; bottom:140px; "></div><div class="dot" style="left:104px; bottom:141px; "></div><div class="dot" style="left:106px; bottom:142px; "></div><div class="dot" style="left:108px; bottom:142px; "></div><div class="dot" style="left:110px; bottom:143px; "></div><div class="dot" style="left:112px; bottom:144px; "></div><div class="dot" style="left:114px; bottom:145px; "></div><div class="dot" style="left:116px; bottom:145px; "></div><div class="dot" style="left:118px; bottom:146px; "></div><div class="dot" style="left:120px; bottom:146px; "></div><div class="dot" style="left:122px; bottom:147px; "></div><div class="dot" style="left:124px; bottom:147px; "></div><div class="dot" style="left:126px; bottom:148px; "></div><div class="dot" style="left:128px; bottom:148px; "></div><div class="dot" style="left:130px; bottom:148px; "></div><div class="dot" style="left:132px; bottom:149px; "></div><div class="dot" style="left:134px; bottom:149px; "></div><div class="dot" style="left:136px; bottom:149px; "></div><div class="dot" style="left:138px; bottom:150px; "></div><div class="dot" style="left:140px; bottom:150px; "></div><div class="dot" style="left:142px; bottom:150px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				jindo.Effect.cubicBezier(0.25, 0.1, 0.25, 1)와 동일하다.
			</td>
		</tr>
		
		<tr>
			<td class="name">cubicEaseIn</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:1px; "></div><div class="dot" style="left:10px; bottom:1px; "></div><div class="dot" style="left:12px; bottom:2px; "></div><div class="dot" style="left:14px; bottom:2px; "></div><div class="dot" style="left:16px; bottom:3px; "></div><div class="dot" style="left:18px; bottom:4px; "></div><div class="dot" style="left:20px; bottom:4px; "></div><div class="dot" style="left:22px; bottom:5px; "></div><div class="dot" style="left:24px; bottom:6px; "></div><div class="dot" style="left:26px; bottom:7px; "></div><div class="dot" style="left:28px; bottom:8px; "></div><div class="dot" style="left:30px; bottom:9px; "></div><div class="dot" style="left:32px; bottom:11px; "></div><div class="dot" style="left:34px; bottom:12px; "></div><div class="dot" style="left:36px; bottom:13px; "></div><div class="dot" style="left:38px; bottom:14px; "></div><div class="dot" style="left:40px; bottom:16px; "></div><div class="dot" style="left:42px; bottom:17px; "></div><div class="dot" style="left:44px; bottom:19px; "></div><div class="dot" style="left:46px; bottom:20px; "></div><div class="dot" style="left:48px; bottom:22px; "></div><div class="dot" style="left:50px; bottom:23px; "></div><div class="dot" style="left:52px; bottom:25px; "></div><div class="dot" style="left:54px; bottom:27px; "></div><div class="dot" style="left:56px; bottom:28px; "></div><div class="dot" style="left:58px; bottom:30px; "></div><div class="dot" style="left:60px; bottom:32px; "></div><div class="dot" style="left:62px; bottom:34px; "></div><div class="dot" style="left:64px; bottom:35px; "></div><div class="dot" style="left:66px; bottom:38px; "></div><div class="dot" style="left:68px; bottom:40px; "></div><div class="dot" style="left:70px; bottom:42px; "></div><div class="dot" style="left:72px; bottom:44px; "></div><div class="dot" style="left:74px; bottom:46px; "></div><div class="dot" style="left:76px; bottom:48px; "></div><div class="dot" style="left:78px; bottom:51px; "></div><div class="dot" style="left:80px; bottom:53px; "></div><div class="dot" style="left:82px; bottom:55px; "></div><div class="dot" style="left:84px; bottom:57px; "></div><div class="dot" style="left:86px; bottom:60px; "></div><div class="dot" style="left:88px; bottom:62px; "></div><div class="dot" style="left:90px; bottom:64px; "></div><div class="dot" style="left:92px; bottom:67px; "></div><div class="dot" style="left:94px; bottom:69px; "></div><div class="dot" style="left:96px; bottom:72px; "></div><div class="dot" style="left:98px; bottom:74px; "></div><div class="dot" style="left:100px; bottom:77px; "></div><div class="dot" style="left:102px; bottom:79px; "></div><div class="dot" style="left:104px; bottom:82px; "></div><div class="dot" style="left:106px; bottom:84px; "></div><div class="dot" style="left:108px; bottom:87px; "></div><div class="dot" style="left:110px; bottom:90px; "></div><div class="dot" style="left:112px; bottom:92px; "></div><div class="dot" style="left:114px; bottom:95px; "></div><div class="dot" style="left:116px; bottom:98px; "></div><div class="dot" style="left:118px; bottom:101px; "></div><div class="dot" style="left:120px; bottom:103px; "></div><div class="dot" style="left:122px; bottom:106px; "></div><div class="dot" style="left:124px; bottom:109px; "></div><div class="dot" style="left:126px; bottom:112px; "></div><div class="dot" style="left:128px; bottom:114px; "></div><div class="dot" style="left:130px; bottom:118px; "></div><div class="dot" style="left:132px; bottom:121px; "></div><div class="dot" style="left:134px; bottom:124px; "></div><div class="dot" style="left:136px; bottom:127px; "></div><div class="dot" style="left:138px; bottom:130px; "></div><div class="dot" style="left:140px; bottom:134px; "></div><div class="dot" style="left:142px; bottom:137px; "></div><div class="dot" style="left:144px; bottom:140px; "></div><div class="dot" style="left:146px; bottom:143px; "></div><div class="dot" style="left:148px; bottom:146px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				jindo.Effect.cubicBezier(0.42, 0, 1, 1)와 동일하다.
			</td>
		</tr>
		
		<tr>
			<td class="name">cubicEaseOut</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:4px; "></div><div class="dot" style="left:4px; bottom:7px; "></div><div class="dot" style="left:6px; bottom:10px; "></div><div class="dot" style="left:8px; bottom:13px; "></div><div class="dot" style="left:10px; bottom:16px; "></div><div class="dot" style="left:12px; bottom:20px; "></div><div class="dot" style="left:14px; bottom:23px; "></div><div class="dot" style="left:16px; bottom:26px; "></div><div class="dot" style="left:18px; bottom:29px; "></div><div class="dot" style="left:20px; bottom:32px; "></div><div class="dot" style="left:22px; bottom:36px; "></div><div class="dot" style="left:24px; bottom:38px; "></div><div class="dot" style="left:26px; bottom:41px; "></div><div class="dot" style="left:28px; bottom:44px; "></div><div class="dot" style="left:30px; bottom:47px; "></div><div class="dot" style="left:32px; bottom:49px; "></div><div class="dot" style="left:34px; bottom:52px; "></div><div class="dot" style="left:36px; bottom:55px; "></div><div class="dot" style="left:38px; bottom:58px; "></div><div class="dot" style="left:40px; bottom:60px; "></div><div class="dot" style="left:42px; bottom:63px; "></div><div class="dot" style="left:44px; bottom:66px; "></div><div class="dot" style="left:46px; bottom:68px; "></div><div class="dot" style="left:48px; bottom:71px; "></div><div class="dot" style="left:50px; bottom:73px; "></div><div class="dot" style="left:52px; bottom:76px; "></div><div class="dot" style="left:54px; bottom:78px; "></div><div class="dot" style="left:56px; bottom:81px; "></div><div class="dot" style="left:58px; bottom:83px; "></div><div class="dot" style="left:60px; bottom:86px; "></div><div class="dot" style="left:62px; bottom:88px; "></div><div class="dot" style="left:64px; bottom:90px; "></div><div class="dot" style="left:66px; bottom:93px; "></div><div class="dot" style="left:68px; bottom:95px; "></div><div class="dot" style="left:70px; bottom:97px; "></div><div class="dot" style="left:72px; bottom:99px; "></div><div class="dot" style="left:74px; bottom:102px; "></div><div class="dot" style="left:76px; bottom:104px; "></div><div class="dot" style="left:78px; bottom:106px; "></div><div class="dot" style="left:80px; bottom:108px; "></div><div class="dot" style="left:82px; bottom:110px; "></div><div class="dot" style="left:84px; bottom:112px; "></div><div class="dot" style="left:86px; bottom:115px; "></div><div class="dot" style="left:88px; bottom:116px; "></div><div class="dot" style="left:90px; bottom:118px; "></div><div class="dot" style="left:92px; bottom:120px; "></div><div class="dot" style="left:94px; bottom:122px; "></div><div class="dot" style="left:96px; bottom:123px; "></div><div class="dot" style="left:98px; bottom:125px; "></div><div class="dot" style="left:100px; bottom:127px; "></div><div class="dot" style="left:102px; bottom:128px; "></div><div class="dot" style="left:104px; bottom:130px; "></div><div class="dot" style="left:106px; bottom:131px; "></div><div class="dot" style="left:108px; bottom:133px; "></div><div class="dot" style="left:110px; bottom:134px; "></div><div class="dot" style="left:112px; bottom:136px; "></div><div class="dot" style="left:114px; bottom:137px; "></div><div class="dot" style="left:116px; bottom:138px; "></div><div class="dot" style="left:118px; bottom:139px; "></div><div class="dot" style="left:120px; bottom:141px; "></div><div class="dot" style="left:122px; bottom:142px; "></div><div class="dot" style="left:124px; bottom:143px; "></div><div class="dot" style="left:126px; bottom:144px; "></div><div class="dot" style="left:128px; bottom:145px; "></div><div class="dot" style="left:130px; bottom:146px; "></div><div class="dot" style="left:132px; bottom:146px; "></div><div class="dot" style="left:134px; bottom:147px; "></div><div class="dot" style="left:136px; bottom:148px; "></div><div class="dot" style="left:138px; bottom:148px; "></div><div class="dot" style="left:140px; bottom:149px; "></div><div class="dot" style="left:142px; bottom:149px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				jindo.Effect.cubicBezier(0, 0, 0.58, 1)와 동일하다.
			</td>
		</tr>
		
		<tr>
			<td class="name">cubicEaseInOut</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:0px; "></div><div class="dot" style="left:4px; bottom:0px; "></div><div class="dot" style="left:6px; bottom:0px; "></div><div class="dot" style="left:8px; bottom:1px; "></div><div class="dot" style="left:10px; bottom:1px; "></div><div class="dot" style="left:12px; bottom:2px; "></div><div class="dot" style="left:14px; bottom:3px; "></div><div class="dot" style="left:16px; bottom:3px; "></div><div class="dot" style="left:18px; bottom:4px; "></div><div class="dot" style="left:20px; bottom:5px; "></div><div class="dot" style="left:22px; bottom:6px; "></div><div class="dot" style="left:24px; bottom:8px; "></div><div class="dot" style="left:26px; bottom:9px; "></div><div class="dot" style="left:28px; bottom:11px; "></div><div class="dot" style="left:30px; bottom:12px; "></div><div class="dot" style="left:32px; bottom:14px; "></div><div class="dot" style="left:34px; bottom:16px; "></div><div class="dot" style="left:36px; bottom:18px; "></div><div class="dot" style="left:38px; bottom:20px; "></div><div class="dot" style="left:40px; bottom:22px; "></div><div class="dot" style="left:42px; bottom:24px; "></div><div class="dot" style="left:44px; bottom:27px; "></div><div class="dot" style="left:46px; bottom:29px; "></div><div class="dot" style="left:48px; bottom:32px; "></div><div class="dot" style="left:50px; bottom:35px; "></div><div class="dot" style="left:52px; bottom:38px; "></div><div class="dot" style="left:54px; bottom:41px; "></div><div class="dot" style="left:56px; bottom:44px; "></div><div class="dot" style="left:58px; bottom:47px; "></div><div class="dot" style="left:60px; bottom:50px; "></div><div class="dot" style="left:62px; bottom:53px; "></div><div class="dot" style="left:64px; bottom:56px; "></div><div class="dot" style="left:66px; bottom:60px; "></div><div class="dot" style="left:68px; bottom:63px; "></div><div class="dot" style="left:70px; bottom:68px; "></div><div class="dot" style="left:72px; bottom:71px; "></div><div class="dot" style="left:74px; bottom:74px; "></div><div class="dot" style="left:76px; bottom:76px; "></div><div class="dot" style="left:78px; bottom:79px; "></div><div class="dot" style="left:80px; bottom:82px; "></div><div class="dot" style="left:82px; bottom:87px; "></div><div class="dot" style="left:84px; bottom:90px; "></div><div class="dot" style="left:86px; bottom:94px; "></div><div class="dot" style="left:88px; bottom:97px; "></div><div class="dot" style="left:90px; bottom:100px; "></div><div class="dot" style="left:92px; bottom:103px; "></div><div class="dot" style="left:94px; bottom:106px; "></div><div class="dot" style="left:96px; bottom:109px; "></div><div class="dot" style="left:98px; bottom:112px; "></div><div class="dot" style="left:100px; bottom:115px; "></div><div class="dot" style="left:102px; bottom:118px; "></div><div class="dot" style="left:104px; bottom:121px; "></div><div class="dot" style="left:106px; bottom:123px; "></div><div class="dot" style="left:108px; bottom:126px; "></div><div class="dot" style="left:110px; bottom:128px; "></div><div class="dot" style="left:112px; bottom:130px; "></div><div class="dot" style="left:114px; bottom:132px; "></div><div class="dot" style="left:116px; bottom:134px; "></div><div class="dot" style="left:118px; bottom:136px; "></div><div class="dot" style="left:120px; bottom:138px; "></div><div class="dot" style="left:122px; bottom:139px; "></div><div class="dot" style="left:124px; bottom:141px; "></div><div class="dot" style="left:126px; bottom:142px; "></div><div class="dot" style="left:128px; bottom:144px; "></div><div class="dot" style="left:130px; bottom:145px; "></div><div class="dot" style="left:132px; bottom:146px; "></div><div class="dot" style="left:134px; bottom:147px; "></div><div class="dot" style="left:136px; bottom:147px; "></div><div class="dot" style="left:138px; bottom:148px; "></div><div class="dot" style="left:140px; bottom:149px; "></div><div class="dot" style="left:142px; bottom:149px; "></div><div class="dot" style="left:144px; bottom:150px; "></div><div class="dot" style="left:146px; bottom:150px; "></div><div class="dot" style="left:148px; bottom:150px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				jindo.Effect.cubicBezier(0.42, 0, 0.58, 1)와 동일하다.
			</td>
		</tr>
		
		<tr>
			<td class="name">cubicEaseOutIn</td>
			<td><div class="graph"><div class="dot" style="left:0px; bottom:0px; "></div><div class="dot" style="left:2px; bottom:13px; "></div><div class="dot" style="left:4px; bottom:18px; "></div><div class="dot" style="left:6px; bottom:21px; "></div><div class="dot" style="left:8px; bottom:24px; "></div><div class="dot" style="left:10px; bottom:28px; "></div><div class="dot" style="left:12px; bottom:30px; "></div><div class="dot" style="left:14px; bottom:32px; "></div><div class="dot" style="left:16px; bottom:34px; "></div><div class="dot" style="left:18px; bottom:36px; "></div><div class="dot" style="left:20px; bottom:38px; "></div><div class="dot" style="left:22px; bottom:40px; "></div><div class="dot" style="left:24px; bottom:42px; "></div><div class="dot" style="left:26px; bottom:43px; "></div><div class="dot" style="left:28px; bottom:45px; "></div><div class="dot" style="left:30px; bottom:46px; "></div><div class="dot" style="left:32px; bottom:48px; "></div><div class="dot" style="left:34px; bottom:49px; "></div><div class="dot" style="left:36px; bottom:51px; "></div><div class="dot" style="left:38px; bottom:52px; "></div><div class="dot" style="left:40px; bottom:54px; "></div><div class="dot" style="left:42px; bottom:55px; "></div><div class="dot" style="left:44px; bottom:56px; "></div><div class="dot" style="left:46px; bottom:58px; "></div><div class="dot" style="left:48px; bottom:59px; "></div><div class="dot" style="left:50px; bottom:60px; "></div><div class="dot" style="left:52px; bottom:62px; "></div><div class="dot" style="left:54px; bottom:63px; "></div><div class="dot" style="left:56px; bottom:64px; "></div><div class="dot" style="left:58px; bottom:65px; "></div><div class="dot" style="left:60px; bottom:66px; "></div><div class="dot" style="left:62px; bottom:67px; "></div><div class="dot" style="left:64px; bottom:69px; "></div><div class="dot" style="left:66px; bottom:70px; "></div><div class="dot" style="left:68px; bottom:71px; "></div><div class="dot" style="left:70px; bottom:72px; "></div><div class="dot" style="left:72px; bottom:73px; "></div><div class="dot" style="left:74px; bottom:74px; "></div><div class="dot" style="left:76px; bottom:76px; "></div><div class="dot" style="left:78px; bottom:77px; "></div><div class="dot" style="left:80px; bottom:78px; "></div><div class="dot" style="left:82px; bottom:79px; "></div><div class="dot" style="left:84px; bottom:80px; "></div><div class="dot" style="left:86px; bottom:81px; "></div><div class="dot" style="left:88px; bottom:83px; "></div><div class="dot" style="left:90px; bottom:84px; "></div><div class="dot" style="left:92px; bottom:85px; "></div><div class="dot" style="left:94px; bottom:86px; "></div><div class="dot" style="left:96px; bottom:87px; "></div><div class="dot" style="left:98px; bottom:88px; "></div><div class="dot" style="left:100px; bottom:90px; "></div><div class="dot" style="left:102px; bottom:91px; "></div><div class="dot" style="left:104px; bottom:92px; "></div><div class="dot" style="left:106px; bottom:94px; "></div><div class="dot" style="left:108px; bottom:95px; "></div><div class="dot" style="left:110px; bottom:96px; "></div><div class="dot" style="left:112px; bottom:98px; "></div><div class="dot" style="left:114px; bottom:99px; "></div><div class="dot" style="left:116px; bottom:101px; "></div><div class="dot" style="left:118px; bottom:102px; "></div><div class="dot" style="left:120px; bottom:104px; "></div><div class="dot" style="left:122px; bottom:105px; "></div><div class="dot" style="left:124px; bottom:107px; "></div><div class="dot" style="left:126px; bottom:108px; "></div><div class="dot" style="left:128px; bottom:110px; "></div><div class="dot" style="left:130px; bottom:112px; "></div><div class="dot" style="left:132px; bottom:114px; "></div><div class="dot" style="left:134px; bottom:116px; "></div><div class="dot" style="left:136px; bottom:118px; "></div><div class="dot" style="left:138px; bottom:120px; "></div><div class="dot" style="left:140px; bottom:122px; "></div><div class="dot" style="left:142px; bottom:126px; "></div><div class="dot" style="left:144px; bottom:129px; "></div><div class="dot" style="left:146px; bottom:132px; "></div><div class="dot" style="left:148px; bottom:137px; "></div><div class="dot" style="left:150px; bottom:150px; "></div><div class="realtime-hline"></div></div></td>
			<td>
				<div class="transition">
					<div class="position">position</div>
					<div class="color">color</div>
					<div class="opacity">opacity</div>
				</div>
				<div class="demoinput">
					duration
					<select class="demoduration">
						<option value="200">200</option>
						<option value="500">500</option>
						<option value="1000" selected="selected">1000</option>
						<option value="2000">2000</option>
						<option value="5000">5000</option>
					</select>
					fps
					<select class="demofps">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="30" selected="selected">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
						<option value="60">60</option>
					</select>
					<button class="demoplay">demo</button>
				</div>
			</td>
		</tr>
		<tr class="desc">
			<td></td><td colspan="2">
				jindo.Effect.cubicBezier(0, 0.42, 1, 0.58)와 동일하다.
			</td>
		</tr>
		
	</tbody>
	</table>

	<h3>cubicBezier 함수</h3>
	<div class="t1">
		<div>
		jindo.Effect.cubicBezier 함수는 cubicBezier 커브를 이용해 이펙트 함수를 생성한다.
		<br>jindo.Effect.cubicEase, cubicEaseIn, cubicEaseOut, cubicEaseInOut, cubicEaseOutIn 함수가 cubicBezier 커브를 이용해 생성된 이펙트함수이다.
		
		<h4>cubicBezier 함수 그래프 구하기</h4>
		아래 그래프는 jindo.Effect.cubicBezier(0.25, 0.1, 0.25, 1)의 이펙트함수를 그리고 있다.
		<br>빨간 점과 초록색 점을 드래그하거나 input에 값을 입력하여 실시간으로 변하는 cubicBezier 그래프를 확인할 수 있다.
		<br><strong id="cubicbezier-text"></strong>
		</div>
		<div style="position:relative; height:315px;">
			<div class="cubicbezier-graph" id="cubicbezier-graph"></div>
			<div id="dotdrag" style="position:absolute;width:307px;height:307px;">
				<div class="control-dot d1" id="cbd1"></div>
				<div class="control-dot d2" id="cbd2"></div>
			</div>
		</div>	
			<div style="clear:both; color:red;">
				Point 1 : ( <input type="text" value="0.25" id="cbx1" onchange="placeDot(true, false, false, false)"/>, 
				<input type="text" value="0.1" id="cby1" onchange="placeDot(false, true, false, false)"/> )
			</div>
			<div style="clear:both; color:green;">
				Point 2 : ( <input type="text" value="0.25" id="cbx2" onchange="placeDot(false, false, true, false)" />,
				<input type="text" value="1" id="cby2"  onchange="placeDot(false, false, false, true)"/> )
			</div>
		</div>
	</div>
	
	<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
	<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
	<script type="text/javascript" charset="utf-8" src="../../source/jindo.UIComponent.js"></script>
	<script type="text/javascript" charset="utf-8" src="../../source/jindo.Effect.js"></script>
	<script type="text/javascript" charset="utf-8" src="../../source/jindo.Timer.js"></script>
	<script type="text/javascript" charset="utf-8" src="../../source/jindo.Transition.js"></script>
	<script type="text/javascript" charset="utf-8" src="../../source/jindo.DragArea.js"></script>
	<script type="text/javascript">
		
		function getEffect(sEffect){
			if (sEffect == "pulse") {
				return jindo.Effect[sEffect](arguments[1] || 3);
			} else if (sEffect == "wave") {
				return jindo.Effect[sEffect](arguments[1] || 2, arguments[2] || 0.25);
			} else {
				return jindo.Effect[sEffect];
			}
		}
		
		function makeGraph(fEffect, nCount, welGraph) {
			var f = fEffect(0, nCount);
			var elRealtimeHLine = jindo.$('<div class="realtime-hline" />');
			
			for (var i = 0, nValue; i <= nCount ;i += 2) {
				var elDot = jindo.$('<div class="dot" style="left:'+i+'px; bottom:' + Math.round(f(i / nCount)) + 'px; " />');
				welGraph.append(elDot);
			}
			welGraph.append(elRealtimeHLine);
			
		}
		
		jindo.$A(jindo.$$("td.name")).forEach(function(el){
			var wel = jindo.$Element(el);
			var sEffect = wel.text();
			var welGraph = wel.next().first();
			var fEffect = getEffect(sEffect);
			makeGraph(fEffect, 150, welGraph);
			var welTransition = wel.parent().last();
			var oTransition = new jindo.Transition();
			jindo.$Fn(function(){
				var elPosition = welTransition.query(".position").$value(),
					elColor = welTransition.query(".color").$value(),
					elOpacity = welTransition.query(".opacity").$value(),
					elRealtimeHLine = welGraph.query(".realtime-hline").$value(),
					welRealtimeHLine = jindo.$Element(elRealtimeHLine);
				
				welRealtimeHLine.show();
				
				var demofps = welTransition.query("select.demofps").$value().value;
				var demoduration = welTransition.query("select.demoduration").$value().value; 
				
				oTransition.fps(demofps).abort().detachAll().start(demoduration, elPosition, {
					"@left" : fEffect("0px", "220px")
				}, elColor, {
					"@backgroundColor" : fEffect("#ccc", "#0075C8")
				}, elOpacity, {
					"@opacity" : fEffect(0, 1)
				}, elRealtimeHLine, {
					"@width" : jindo.Effect.linear("0px", "150px"),
					"@bottom" : fEffect("0px", "150px")
				}).sleep(500).start(function(){
					jindo.$Element(elPosition).css("left", 0);
					jindo.$Element(elColor).css("backgroundColor", "#fff");
					jindo.$Element(elOpacity).opacity(1);
					welRealtimeHLine.hide();
				});
				
			}).attach(wel.parent().query("button.demoplay"), "click");
		});
		
		function placeDot(x1, y1, x2, y2) {
			if (x1) {
				jindo.$Element("cbd1").css("left", jindo.$("cbx1").value * 300 + "px");
			}
			
			if (y1) {
				jindo.$Element("cbd1").css("top", Math.max(0, 300 - jindo.$("cby1").value * 300) + "px");
			}
			
			if (x2) {
				jindo.$Element("cbd2").css("left", jindo.$("cbx2").value * 300 + "px");
			}
			
			if (y2) {
				jindo.$Element("cbd2").css("top", Math.max(0, 300 - jindo.$("cby2").value * 300) + "px");
			}
			drawCubicBezier();	
		}
		function drawCubicBezier() {
			var x1 = jindo.$("cbx1").value, 
				y1 = jindo.$("cby1").value, 
				x2 = jindo.$("cbx2").value, 
				y2 = jindo.$("cby2").value;
			makeGraph(jindo.Effect.cubicBezier(x1, y1, x2, y2), 300, jindo.$Element("cubicbezier-graph").empty());
			jindo.$Element("cubicbezier-text").text("jindo.Effect.cubicBezier(" + x1 + ", " + y1 + ", " + x2 + ", " + y2 + ")");	
		}
		
		placeDot(true, true, true, true);
		
		new jindo.DragArea(jindo.$("dotdrag"), {
			sClassName : "control-dot",
			bFlowOut : false
		}).attach({
			drag : function(oCustomEvent) {
				jindo.$("cbx1").value = (parseInt(jindo.$Element("cbd1").css("left"), 10) / 300).toFixed(2) * 1;
				jindo.$("cby1").value = (1 - parseInt(jindo.$Element("cbd1").css("top"), 10) / 300).toFixed(2) * 1;
				jindo.$("cbx2").value = (parseInt(jindo.$Element("cbd2").css("left"), 10) / 300).toFixed(2) * 1;
				jindo.$("cby2").value = (1 - parseInt(jindo.$Element("cbd2").css("top"), 10) / 300).toFixed(2) * 1;
				drawCubicBezier();
			},
			handleUp : function(oCustomEvent) {
			}
		})
		
	</script>
	</div>	
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>